<!DOCTYPE html> <html ng-app="myModule"> <head> <meta charset="UTF-8"> <title>scope绑值策略一.'@'把当前属性作为字符串传值</title> <!--引入js库anglarjs--> <script type="text/javascript" src="https://www.jb51.net/framework/1.3.0.14/angular.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/Scope@.js"></script> </head> <body> <div ng-controller="myAppCtrl"> <drink flavor="{{ctrFlavor}}"></drink> </div> </body> </html>
Scope@.js
var myModule = angular.module('myModule', []); myModule.controller('myAppCtrl',['$scope', function($scope){ console.log($scope); $scope.ctrFlavor = "百事可乐"; }]); myModule.directive('drink', function(){ return { restrict: 'AE', scope: { /*独立scope作用域*/ flavor: '@' }, replace:true, template: '<p>{{flavor}}</p>' //使用link进行指令和控制器两个作用域中数据的绑定。 //如果用scope中@的话，就不需要link这么麻烦了，angularJS会自动进行绑定 /*, link:function(scope,element,attrs){ element.bind('mouseenter', function(){ }) scope.flavor = attrs.flavor; }*/ } })
scope “=” 与父scope属性进行双向绑定
index.html
<!DOCTYPE html> <html ng-app="myModule"> <head> <meta charset="UTF-8"> <title>scope绑值策略二.'='与父scope中的属性进行双向绑定</title> <!--引入第三方样式库bootstrap.min.css--> <link href="https://www.jb51.net/framework/bootstrap-3.0.0/css/bootstrap.min.css" /> <!--引入js库anglarjs--> <script type="text/javascript" src="https://www.jb51.net/js/scope=.js"></script> </head> <body> <div ng-controller="myModuleCtrl"> <p>{{describe}}</p> Ctrl--控制器:<br /> <input type="text" ng-model="ctrFlavor" /> <br /> <p>{{ctrFlavor}}</p> Directive--指令:<br /> <drink flavor="ctrFlavor"></drink> <p>{{flavor}}</p> </div> </body> </html>
scope=.js
var myModule = angular.module('myModule', []); myModule.controller('myModuleCtrl',['$scope', function($scope){ $scope.describe = "scope绑值策略二.=与父scope中的属性进行双向绑定"; $scope.ctrFlavor = "可口可乐"; }]); //=与父scope中的属性进行双向绑定 myModule.directive('drink',function(){ return { restrict: 'EA', scope: { /*ng-isolate-scope 隔离作用域*/ flavor : '=' }, template: '<input type="text" ng-model="flavor" />' /*replace:true*/ } });
这个例子中有两个输入框，第一个绑定了myModuleCtrl控制器中的scope对象的ctrlFlavor 属性。
第二个绑定的是指令中的flavor属性。但是在drink 指令中 scope对象的flavor 属性 用了 ”=“ ，
与父scope中的属性进行双向数据绑定。所以两个值有一个改动，另一个属性值也会改动。 简单理解为把两个存放数据仓库给相等 A1 == B1
scope& '&'传递一个来自父scope的函数，稍后调用
index.html
<!DOCTYPE html> <html ng-app="myModule"> <head> <meta charset="UTF-8"> <title>scope绑值策略三.'&'传递一个来自父scope的函数，稍后调用</title> <!--引入第三方样式库bootstrap.min.css--> <link href="https://www.jb51.net/framework/bootstrap-3.0.0/css/bootstrap.min.css" /> <!--引入js库anglarjs--> <script type="text/javascript" src="https://www.jb51.net/js/scope&.js"></script> </head> <body> <div ng-controller="myModuleCtrl"> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> </div> <!--代码模板template--> <script type="text/ng-template"> <div> <form role = "form"> <div class = "form-group"> <input type="text" ng-model="userName" /> <button ng-click="greet({name:userName})">Greeting</button> </div> </form> </div> </script> <!--代码模板template--> </body> </html>
scope&.js