angularJS自定义指令：scope属性

来源：互联网发布：中国制造业知乎编辑：程序博客网时间：2024/04/27 09:38

angularJs自定义指令中的scope属性有3种取值方式：

1、默认值false，即：默认直接用父scope，但比较危险

2、true，即：继承父scope

3、建立一个新的隔离scope，但是仍然可以和外部scope隔离，即：1、单向绑定 ‘@’ 2、双向绑定 =’3、内部scope的函数返回值与外部scope绑定，值以key-value返回

在AngularJS中，除了内置指令如ng-click等，我们还可以自定义指令。自定义指令，是为了扩展DOM元素的功能。代码中，通过指定directive中的restrict属性，来决定这个指令是作为标签（E）、属性（A）、属性值（C）、还是注释（M）。

下面主要介绍一下1和2两种表示方式：

1、默认值false，直接使用父scope，这样比较不好

实例:

1)、app.js

app.directive('myDirective', function() {    return {        restrict: 'E',        replace: true,        templateUrl: 'templates/template1.html',        scope: false,   // 默认值        controller: null    }});

2)、指令模板template1.html

<div>    <!--这里ng-model绑定的input，就是父scope的变量input-->    <p>自定义指令scope：<input type="text" ng-model="input"></p>    <p>结果：{{input}}</p></div>

3)、指令应用

<body ng-app="demo" ng-controller="controller">    <p>父scope：<input type="text" ng-model="input"></p>    <!--自定义指令-->    <my-directive></my-directive></body>

可以看到，因为是同一个scope，所以无论是改变my-directive里面还是外面的输入框中的文字，都会改变这个scope中的“input”的值。

2、true：继承父scope

这里只需将上面scope:true即可

运行之后的效果是：

一开始是绑定在父scope中，但当修改位于自定义指令中的输入框时，子scope就被创建并继承父scope了。之后，修改父scope并不能影响input的值，而修改子scope就可以改变input的值了

0 0