AngularJs自定义一个指令,并且这个指令的内容是引用某个控制器的数据,那么控制器变量发生变化,也会引起指令内容的变化,同样的,如果指令通过ng-model改变值,控制器里边的变量内容也会发生改变。
但是有些情况下,我们不需要这样去同步数据,通过设置指令属性scope可以解决这个问题:
html部分:
1 | <div ng-app= "app" ng-controller= "ctr1" > |
2 | <input type = "text" ng-model= "name" > |
|
JavaScript部分:
01 | var m = angular.module( 'app' , []); |
02 | m.controller( 'ctr1' , [ '$scope' , function ($scope){ |
03 | $scope.name = '赵一鸣AngularJs学习笔记' ; |
05 | m.directive( 'zymBlog' , [ function (){ |
08 | template : '<p>{{name}}<input type="text" ng-model="name"></p>' , |
|
通过以上代码,改变指令内的input值,所有引用name值的数据都会发生变化,这时添加一个属性scope如下:
01 | var m = angular.module( 'app' , []); |
02 | m.controller( 'ctr1' , [ '$scope' , function ($scope){ |
03 | $scope.name = '赵一鸣AngularJs学习笔记' ; |
05 | m.directive( 'zymBlog' , [ function (){ |
08 | template : '<p>{{name}}<input type="text" ng-model="name"></p>' , |
|
scope属性的默认值是false,当把它改成true的时候,修改指令与修改控制器时,将互不影响各自的数据。
还有一种情况:
01 | var m = angular.module( 'app' , []); |
02 | m.controller( 'ctr1' , [ '$scope' , function ($scope){ |
03 | $scope.name = '赵一鸣AngularJs学习笔记' ; |
05 | m.directive( 'zymBlog' , [ function (){ |
08 | template : '<p>{{name}}<input type="text" ng-model="name"></p>' , |
|
以上代码,如果将scope的值改成花括号{},那么,默认情况下指令内部都不会引用控制器的变量值,修改的时候更是互不影响!