AngularJs中指令的scope作用域分析

AngularJs自定义一个指令，并且这个指令的内容是引用某个控制器的数据，那么控制器变量发生变化，也会引起指令内容的变化，同样的，如果指令通过ng-model改变值，控制器里边的变量内容也会发生改变。

但是有些情况下，我们不需要这样去同步数据，通过设置指令属性scope可以解决这个问题：

html部分：

1 <div ng-app="app" ng-controller="ctr1"> 2     <input type="text" ng-model="name"> 3     <h1 zym-blog></h1> 4 </div>

JavaScript部分：

01 var m = angular.module('app', []); 02 m.controller('ctr1', ['$scope', function($scope){ 03     $scope.name = '赵一鸣AngularJs学习笔记'; 04 }]); 05 m.directive('zymBlog', [function(){ 06     return { 07         restrict : 'AEC', 08         template : '<p>{{name}}<input type="text" ng-model="name"></p>', 09     } 10 }]);

通过以上代码，改变指令内的input值，所有引用name值的数据都会发生变化，这时添加一个属性scope如下：

01 var m = angular.module('app', []); 02 m.controller('ctr1', ['$scope', function($scope){ 03     $scope.name = '赵一鸣AngularJs学习笔记'; 04 }]); 05 m.directive('zymBlog', [function(){ 06     return { 07         restrict : 'AEC', 08         template : '<p>{{name}}<input type="text" ng-model="name"></p>', 09         scope : true 10     } 11 }]);

scope属性的默认值是false，当把它改成true的时候，修改指令与修改控制器时，将互不影响各自的数据。

还有一种情况：

01 var m = angular.module('app', []); 02 m.controller('ctr1', ['$scope', function($scope){ 03     $scope.name = '赵一鸣AngularJs学习笔记'; 04 }]); 05 m.directive('zymBlog', [function(){ 06     return { 07         restrict : 'AEC', 08         template : '<p>{{name}}<input type="text" ng-model="name"></p>', 09         scope : {} 10     } 11 }]);

以上代码，如果将scope的值改成花括号{}，那么，默认情况下指令内部都不会引用控制器的变量值，修改的时候更是互不影响！