angular自定义指令scope属性学习笔记
指令在angular项目中的应用非常频繁,当它自带的指令不能满足我们的需求时,我们就需要自定义指令;
在angular,作用域是一个很重要的概念。同样的,要定义一个指令,我们也需要设置他的sope;
angular为自定义指令提供了三种scope:①不创建独立的作用域,直接使用父作用域(false);②创建一个继承自它的父级作用域的独立作用域(true);③创建一个完全与外部隔离的作用域({});
我们创建如下的html:
<div class="out" ng-app="app" ng-controller="appCtrl"> name:{{name}}<br/> <mydir></mydir> </div>
1.当scope值为false时:
var app = angular.module('app', []); app.controller('appCtrl', function ($scope) { $scope.name = 'nico'; }) app.directive('mydir', function () { return { restrict: 'E', template: '<span>{{name}}</span>', scope: false, controller: function ($scope) { $scope.name = '2333' }, link: function (scope, element, attrs, controller) { } } })
页面上的两个name都会变成“2333”,可见,当scope的值为false时,指令可以读取和修改他的父级作用域;
2.当scope的值为true时:
restrict: 'E', template: '<span>{{name}}</span>', scope: true, controller: function ($scope) { }
我们删除对name的修改:页面上显示两个“nico”;
接下来我们在指令的controller中添加对name的修改:
restrict: 'E', template: '<span>{{name}}</span>', scope: true, controller: function ($scope) { $scope.name = '2333' }
页面上第一个name显示为“nico”,第二个name显示为“2333”;
可见,当scope的值为true时,该指令的作用域是一个继承自其父作用域的单独的作用域(类似于构造函数的实例);
3.当scope的值为{}时:
restrict: 'E', template: '<span>{{name}}</span>', scope: {}, controller: function ($scope) { }, link: function (scope, element, attrs, controller) { }
此时,该指令创建一个新的作用域,其中并没有name这个属性,所以页面上只会显示一个'nico';
restrict: 'E', template: '<span>{{name}}</span>', scope: {}, controller: function ($scope) { $scope.name = '2333'; }, link: function (scope, element, attrs, controller) { }
在指令的控制器中创建该属性时,不会影响到外部作用域;页面会显示'nico和2333';
然而,某些时候我们需要自己的作用域,又想引用或修改父作用域的某个属性,第三种情况也为我们提供了一个通道;我们可以使用前缀标识符“@”,“=”,“&”来标示指令作用域中某个属性跟父作用域的关系;
"=":属性双向绑定,首先在html中标示对应关系:指令中的name对应父作用域的name;
<div class="out" ng-app="app" ng-controller="appCtrl"> name:{{name}}<br/> <mydir name="name"></mydir> </div>
其次,在指令的scope中指定该属性的绑定方式:
scope: {name:'='}
这样子我们就完成了name属性的双向绑定,在指令作用域中可以使用和修改父作用域的name属性;
"@":属性单向绑定,其用法与"="相似,不同的是html中的标示因为是单向绑定要用{{}};
<div class="out" ng-app="app" ng-controller="appCtrl"> name:{{name}}<br/> <mydir name="{{name}}"></mydir> </div> —————————————————————————————————————————— scope: {name:'@'}
这样子,就可以在指令中使用父作用域的属性,但是不能修改;
"&":方法单向绑定方法;
<div class="out" ng-app="app" ng-controller="appCtrl"> name:{{name}}<br/> <mydir func="func()"></mydir> </div> —————————————————————————————————————————— scope: {func:'&'}
这样子我们在指令中就可以使用父作用域中的方法了~