我们首先看下面的例子：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link href="https://www.jb51.net/css/bootstrap-3.0.0/css/bootstrap.css" > </head> <body> <hello></hello> <hello></hello> <hello></hello> <hello></hello> </body> <script src="https://www.jb51.net/framework/angular-1.3.0.14/angular.js"></script> <script src="https://www.jb51.net/IsolateScope.js"></script> </html>
我们在看看IsolateScope中的代码：
var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict: 'AE', template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>', replace: true } });
这时候当运行页面的时候发现只要有一个input中的输入变化了，这时候所有的nput的内容都会变化：
这样就会面临一个问题：我们的指令无法单独使用,于是就有了独立作用域的概念。
var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict: 'AE', scope:{}, template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>', replace: true } });
通过把scope设置为{}，那么每一个指令就具有自己独立的scope空间，于是就不会相互影响了。但是angularjs中最重要的概念是：绑定策略。其具有绑定策略如下：
第一步：我们看看原始的方式，也就是不使用上面的三种绑定方式
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link href="https://www.jb51.net/css/bootstrap-3.0.0/css/bootstrap.css" > </head> <body> <!--控制器MyCtrl下面有指令drink，同时指令drink还有自定义的属性flavor，其值为‘百威'--> <div ng-controller="MyCtrl"> <drink flavor="{{ctrlFlavor}}"></drink> </div> </body> <script src="https://www.jb51.net/framework/angular-1.3.0.14/angular.js"></script> <script src="https://www.jb51.net/ScopeAt.js"></script> </html>
看看ScopeAt中的内容：
var myModule = angular.module("MyModule", []); myModule.controller('MyCtrl', ['$scope', function($scope){ $scope.ctrlFlavor="百威"; //在控制器中$scope中设置了ctrlFlavor属性 }]) //定义了drink指令 myModule.directive("drink", function() { return { restrict:'AE', template:"<div>{{flavor}}</div>" , link:function(scope,element,attrs){ scope.flavor=attrs.flavor; //链接的时候把drink指令上的flavor属性放在scope中，然后在template中显示 } } });
这时候的DOM结构如下：
但是，这种方式要通过attrs.flavor来获取这个指令的属性值，然后需要把这个属性值绑定到scope对象上，最后在template中才能通过{{}}这种形式获取到scope中的值!
第二步：我们使用上面的@来替换第一种方式，因为它每次都需要自己指定link函数：
var myModule = angular.module("MyModule", []); myModule.controller('MyCtrl', ['$scope', function($scope){ $scope.ctrlFlavor="百威"; //在控制器中$scope中设置了ctrlFlavor属性 }]) //定义了drink指令 myModule.directive("drink", function() { return { restrict:'AE', scope:{ flavor:'@' }, template:"<div>{{flavor}}</div>" } });
这种方式就是把指令drink中的flavor属性值绑定到scope对象上，而且这是ng为我们自动绑定的。不过，@绑定绑定的是字符串,而不是对象!
第三步：我们来学习一下双向数据绑定
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link href="https://www.jb51.net/css/bootstrap-3.0.0/css/bootstrap.css" > </head> <body> <!--指定了控制器MyCtrl--> <div ng-controller="MyCtrl"> Ctrl: <br> <!--第一个输入框输入值绑定到ctrlFlavor，也就是控制器MyCtrl对应的ctrlFlavor值中--> <input type="text" ng-model="ctrlFlavor"> <br> Directive: <br> <!--第二个输入框还是通过指令的方式来完成的--> <drink flavor="ctrlFlavor"></drink> </div> </body> <script src="https://www.jb51.net/framework/angular-1.3.0.14/angular.js"></script> <script src="https://www.jb51.net/ScopeEqual.js"></script> </html>
我们再来看看控制器中内容