前言众所周知,我们在自定义指令时,会指定它的作用域,即scope设置项(默认值为false)。且,scope设置项,可以有三种值,从而也就代表三种不同的作用域,下面我们再来一起回顾下:指令之scopescope: false默认值,指令不会新建一个作用域,使用父级作用域。scop ...
众所周知,我们在自定义指令时,会指定它的作用域,即scope设置项(默认值为false)。
且,scope设置项,可以有三种值,从而也就代表三种不同的作用域,下面我们再来一起回顾下:
指令之scope |
scope: false | 默认值,指令不会新建一个作用域,使用父级作用域。 |
scope: true | 指令会创建一个新的子作用域,原型继承于父级作用域。 |
scope: {…} | 指令会新建一个隔离作用域,不会原型继承父作用域。 |
好了,通过上面,我们很容易知道,在一个元素绑定一个指令,那么仅仅看这个指令的scope,就轻易知道了它的作用域。
但是,假如我们在一个元素上绑定多个指令呢?这个元素的作用域该如何表现呢?
这就是该篇博客核心----一个元素上绑定多个指令,元素的作用域何去何从。
下面,我们就一起来研究下吧。
另,在此之前,为了接下来的研究方便,我们先约定下,将指令scope的不同值,称为false指令,true指令以及isolated指令。
且需要注意的是,多个指令绑定在一个元素上时,只能有且仅有一个指令拥有template哦,不然会报错的。
Demo如下:
<!-- 多个指令绑定在一个元素上时,只能有一个template,不然会报错,如下 --><!DOCTYPE html> <head> <meta charset="utf-8"/> <script src='/images/loading.gif' data-original="angular.js"></script> </head> <body ng-app="myApp"> <div directive-one directive-tow></div> <script> var app = angular.module('myApp', []); app.directive('directiveOne', function(){ return { restrict: 'A', scope: false, template:'<div>one</div>' }; }); app.directive('directiveTow', function(){ return { restrict: 'A', template: '<div>another</div>' }; }); </script> </body></html>
原标题:AngularJS之一个元素上绑定多个指令作用域
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。