你的位置:首页 > 软件开发 > Java > AngularJS之一个元素上绑定多个指令作用域

AngularJS之一个元素上绑定多个指令作用域

发布时间:2016-08-13 01:00:31
前言众所周知,我们在自定义指令时,会指定它的作用域,即scope设置项(默认值为false)。且,scope设置项,可以有三种值,从而也就代表三种不同的作用域,下面我们再来一起回顾下:指令之scopescope: false默认值,指令不会新建一个作用域,使用父级作用域。scop ...
前言

众所周知,我们在自定义指令时,会指定它的作用域,即scope设置项(默认值为false)。

且,scope设置项,可以有三种值,从而也就代表三种不同的作用域,下面我们再来一起回顾下:

指令之scope

scope: false

默认值,指令不会新建一个作用域,使用父级作用域。

scope: true

指令会创建一个新的子作用域,原型继承于父级作用域。

scope: {…}

指令会新建一个隔离作用域,不会原型继承父作用域。

好了,通过上面,我们很容易知道,在一个元素绑定一个指令,那么仅仅看这个指令的scope,就轻易知道了它的作用域。

但是,假如我们在一个元素上绑定多个指令呢?这个元素的作用域该如何表现呢?

这就是该篇博客核心----一个元素上绑定多个指令,元素的作用域何去何从。

下面,我们就一起来研究下吧。

另,在此之前,为了接下来的研究方便,我们先约定下,将指令scope的不同值,称为false指令,true指令以及isolated指令。

且需要注意的是,多个指令绑定在一个元素上时,只能有且仅有一个指令拥有template哦,不然会报错的。

Demo如下:

AngularJS之一个元素上绑定多个指令作用域AngularJS之一个元素上绑定多个指令作用域
<!--  多个指令绑定在一个元素上时,只能有一个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

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。