Home > Developer > Web Develop
A. Single/two-way binding
One-way binding: ng-bing= "nickname", bidirectional Binding: ng-model= "nickname"
B. Scope of the command inheritance controller
Index.html
<! DOCTYPE html><html ng-app="Labapp"> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="Width=device-width, initial-scale= 1.0 "> <script src="Js/lib/angular.js"></script> <script src="Js/app.js"></script> </head> <body> <div ng-controller="Defaultctrl"> <p id="One" lab-input></P> <p id=" lab-input" ></P> </div> </body></html>App.js
angular .module("labApp",[]) .controller(‘defaultCtrl‘,function($scope){ $scope.nickname="xiaofanku"; }) .directive(‘labInput‘,function(){ return { template:‘<p><input type="text" ng-model="nickname" /></p>‘ }; });
Summarize:
1. The directive inherits the variables defined in the controller from the controller: nickname
2. The nickname in the two instructions are synchronous
C. Directives using the scope of the Self/instance
App.js
Angular. Module ("Labapp", []). Controller (' Defaultctrl ', function($scope){ $scope. nickname="Xiaofanku"; }). directive (' Labinput ', function(){ return{//NewController function($scope){ $scope. nickname="Pktmandy"; }, Template:' <p><input type= ' text "ng-model=" nickname "/></p> '}; });Summarize:
1. The variable in the controller (Defaultctrl) is no longer used: nickname, but is declared using the directive controller: Nickname
App.js
Angular. Module ("Labapp", []). Controller (' Defaultctrl ', function($scope){ $scope. nickname="Xiaofanku"; }). directive (' Labinput ', function(){ return{//NewScopetrue, Controller: function($scope){ $scope. nickname="Pktmandy"; }, Template:' <p><input type= ' text "ng-model=" nickname "/></p> '}; });Summarize:
1. Each of the two instructions has its own instance: Nickname
D. Isolation scopes in directives
App.js
Angular. Module ("Labapp", []). Controller (' Defaultctrl ', function($scope){ $scope. nickname="Xiaofanku"; }). directive (' Labinput ', function(){ return{scope:{}, Template:' <p><input type= ' text "ng-model=" nickname "/></p> ', Link: function(scope,element,attrs){Scope.$watch(' nickname ', function(v){Console.log (' current nickname: '+V); }); } }; });Input order:
1. The upper part of the selection is divided into: the first input
2. The selected part is: the second input
3. The lower part of the selection is divided into: After 2 followed by the first input in the
E. Scope in connection directive isolation scopes and controllers (Defaultctrl)
E.1: One-way binding from Defaultctrl to Labinput: @
Index.html
<! DOCTYPE html><html ng-app="Labapp"> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="Width=device-width, initial-scale= 1.0 "> <script src="Js/lib/angular.js"></script> <script src="Js/app.js"></script> </head> <body> <div ng-controller="Defaultctrl"> <p id="One" lab-input Nickname=" {{nickname}} "></P><p id=" both " Lab-input></P></div></Body ></html> App.js
Angular. Module ("Labapp", []). Controller (' Defaultctrl ', function($scope){ $scope. nickname="Xiaofanku";$scope.$watch(' nickname ', function(v){Console.log (' Controller current nickname: '+V); }); }). directive (' Labinput ', function(){ return{scope:{Nickname:' @ '}, Template:' <p><input type= ' text "ng-model=" nickname "/></p> ', Link: function(scope,element,attrs){Scope.$watch(' nickname ', function(v){Console.log (' directive current nickname: '+V); }); } }; });E.2: Two-way binding from Defaultctrl to labinput: =
Place of Change (app.js) 1:
Replace @ in E.1 with =
Place of Change (index.html) 2:
<div ng-controller = "Defaultctrl" > <p id = "one" lab-input Nickname =; </p ; <p id =" I " lab-input > </p ; </< Span class= "Hljs-title" >div ;
If you still use {{}}, the following error is reported:
Summarize:
At this point, if you change the value in input, you see that the controller and the command watch have output
E.3 calls the behavior in the controller (Defaultctrl) from the instruction (labinput):&
Index.html
<! DOCTYPE html><html ng-app="Labapp"> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="Width=device-width, initial-scale= 1.0 "> <script src="Js/lib/angular.js"></script> <script src="Js/app.js"></script> </head> <body> <div ng-controller="Defaultctrl"> <p id="One" lab-input Nickname="nickname" Re-action="reverse ()"></P> <p id=" lab-input" ></P> </div> </body></html>App.js
Angular. Module ("Labapp", []). Controller (' Defaultctrl ', function($scope){ $scope. nickname="Xiaofanku";$scope. reverse= function(){ $scope. nickname=$scope. Nickname.split (""). Reverse (). Join (""); };$scope.$watch(' nickname ', function(v){Console.log (' Controller current nickname: '+V); }); }). directive (' Labinput ', function(){ return{scope:{Nickname:' = ', ReAction:' & '}, Template:' <p><input type= ' text "ng-model=" nickname "ng-click=" ReAction () "/></p> ", Link: function(scope,element,attrs){Scope.$watch(' nickname ', function(v){Console.log (' directive current nickname: '+V); }); } }; });Summarize:
Once the load is successful, clicking on the input box will show the following
Scope in AngularJS ($scope)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
