<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="scripts/angular.js"></script> </head> <body ng-app="app" ng-controller="cur"> how are you! <div> <input type="text" ng-model="name" /> {{name}} <button ng-click="pop(this)">pop</button> </div> <ul> <li ng-repeat="num in list">{{num}}</li> </ul> <select> <option ng-repeat="no in select" value="{{no}}">{{no}}</option> </select> <div ng-show="show()">ng show test</div> <div ng-show="show1">ng show test boolean</div> <script> var app = angular.module('app', []); app.controller('cur', function ($scope) { $scope.name = 'test'; $scope.list = [1, 2, 3, 4]; $scope.select = [4, 3, 2, 1]; $scope.pop = function (obj) { //alert(obj); alert($scope.name); } $scope.show = function () { return false; }; $scope.show1 = true; }); </script> </body> </html>
mark 前端MVVM的实现方案:
整个scope内部的模型,统一由pipe的property change事件来处理,每次触发捕获的change等事件时对比原有scope的data,发现不相同即重新刷新data。 每次执行,均执行整个scope模块init,内部事件全部采用捕获的方式,事件全部绑定在scope最外层。
实现起来与后端mvvm是一致的,如wpf....
自动替换:添加事件检测,捕获change等事件,change之后重新init整个scope.
==section 2016.7.15 deeper practice!
<!DOCTYPE html> <html> <head> <title>calos practising angular!</title> <meta charset="utf-8" /> <script src="scripts/angular.js"></script> </head> <body ng-app="app" ng-controller="cur"> how are you! <div> <input type="text" ng-model="name" /> {{name}} <button ng-disabled="!btndisable" ng-click="pop(this)">pop</button> <button ng-disabled="btndisable" ng-click="pop(this)">pop</button> </div> <ul> <li ng-repeat="num in list">{{num}}</li> </ul> <select ng-model="nameselected" ng-change="changename(this)"> <option ng-repeat="no in select" value="{{no}}">{{no}}</option> </select> <div ng-show="show()">ng show test</div> <div ng-show="show1">ng show test boolean</div> <div ng-include="'/partials/partial1.html'"> <!--how to use partial: remember to add sing quotation! like this. but these words will not be displayed!--> </div> <a href="#/">/ will show by default!</a> <a href="#/page1">Nav to page1 under pages folder!</a> <a href="#/showinfo">Nav to page1 under pages folder!</a> <a href="#/home">embeded page!</a> <div ng-view> <!-- this is a placeholder for routed pages to present! must have the tag ng-view="" --> </div> <script type="text/ng-template" id="embeded.home.html"> <h1> Home </h1> </script> <script src="scripts/angular-route.js"></script> <script> var app = angular.module('app', ['ngRoute']) //#region infrastructure this is controllers region before configuring routes app.controller('cur', function ($scope, $http, $timeout, $interval) { //there should be a argument name validation in this controller //injection function, so, 1st name must be $scope, but can use alias inner! var a = $scope; a.btndisable = true; a.name = 'test'; a.list = [1, 2, 3, 4]; a.nameselected = '请选择'; a.select = [4, 3, 2, 1]; a.select = ['请选择'].concat(a.select); a.pop = function (obj) { //alert(obj); alert(a.name); //below for $http.get practice! $http.get('/jsons/json.json').success(function (response) { a.name = response.name; a.btndisable = (a.btndisable === true ? false : true); }).then(function (ret) {//the data returned has a wapper including data! a.name = ret.data.name; }); } a.show = function () { return false; }; a.changename = function (obj) { console.log(obj); a.name = a.name + 'reissue!' } a.show1 = true; //$timeout(function () { alert('timeout!') }, 5000); //$interval(function () { alert('interval') }, 2000); }); app.controller('page1', function ($scope, $http) { $scope.name = 'page1 controller'; }); //#endregion app.config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/', { template: 'Welcome!' }) .when('/page1', { templateUrl: 'pages/page1.html', controller: 'page1' }) .when('/showinfo', { template: 'show pure text!' }) .when('/home', { templateUrl: 'embeded.home.html' }) .otherwise({ redirectTo: '/' }); }]); </script> </body> </html>
match:!
sendRequest($http, api.userGet).success(function (response) { a.name = response.name; a.btndisable = (a.btndisable === true ? false : true); });