AngularJS自定义指令directive:scope属性

原创 2016年08月15日 17:29:08

一、介绍:


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

指令的定义过程就不详述了,可以参考:https://docs.angularjs.org/guide/directive
在这篇博客中主要记录一下scope属性取值的区别。


二、scope属性的3种取值:


说明:为了探究scope取值对指令的影响,这里举的例子中,自定义指令都是作为DOM的tag使用的,即restrict属性为“E”。指令的名称为“my-directive(myDirective)”。

1、false(默认值):直接使用父scope。比较“危险”。

可以理解成指令内部并没有一个新的scope,它和指令以外的代码共享同一个scope。例子:

(1)指令的定义,app.js:

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

(2)指令模板,my_template_01.html:

<div>
    <!--这里ng-model绑定的input,就是父scope的变量input-->
    <p>自定义指令scope:<input type="text" ng-model="input"></p>

    <p>结果:{{input}}</p>
</div>

(3)指令的使用,index.html:

<body ng-app="watchDemo" ng-controller="controller01">
    <p>父scope:<input type="text" ng-model="input"></p>

    <!--自定义指令-->
    <my-directive></my-directive>
</body>

(4)效果:
这里写图片描述
可以看到,因为是同一个scope,所以无论是改变my-directive里面还是外面的输入框中的文字,都会改变这个scope中的“input”的值。


2、true:继承父scope

(1)指令的定义,app.js:

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: '../templates/my_template_01.html',
        scope: true,    // 只是改动了这里
        controller: null
    }
});

(2)指令模板,my_template_01.html:

<div>
    <!--这里绑定的同名的input,在继承的(子)scope中-->
    <p>自定义指令scope:<input type="text" ng-model="input"></p>

    <p>结果:{{input}}</p>
</div>

(3)指令的使用,index.html,没有变动:

<body ng-app="watchDemo" ng-controller="controller01">
    <p>父scope:<input type="text" ng-model="input"></p>

    <!--自定义指令-->
    <my-directive></my-directive>
</body>

(4)效果:
一开始是绑定在父scope中,但当修改位于自定义指令中的输入框时,子scope就被创建并继承父scope了。之后,修改父scope并不能影响input的值,而修改子scope就可以改变input的值了。如图:
这里写图片描述


3、{ }:创建一个新的“隔离”scope,但仍可与父scope通信

隔离的scope,通常用于创建可复用的指令,也就是它不用管父scope中的model。然而虽然说是“隔离”,但通常我们还是需要让这个子scope跟父scope中的变量进行绑定。绑定的策略有3种:

  • @:单向绑定,外部scope能够影响内部scope,但反过来不成立
  • =:双向绑定,外部scope和内部scope的model能够相互改变
  • &:把内部scope的函数的返回值和外部scope的任何属性绑定起来
(1)@:单向绑定

示例代码:

<body ng-app="watchDemo">
    <!--外部scope-->
    <p>父scope:<input type="text" ng-model="input"></p>
    <!--内部隔离scope-->
    <my-directive my-text="{{input}}"></my-directive>

    <script>
        var app = angular.module('watchDemo', []);
        app.directive('myDirective', function () {
            return {
                restrict: 'E',
                replace: true,
                template: '<p>自定义指令scope:<input type="text" ng-model="myText"></p>',
                scope: {
                    myText: '@'
                }
            }
        });
    </script>
</body>

效果:
这里写图片描述


(2)=:双向绑定

示例代码:

<body ng-app="watchDemo">
    <!--外部scope-->
    <p>父scope:<input type="text" ng-model="input"></p>

    <!--内部隔离scope-->
    <!--注意这里,因为是双向绑定,所以这里不要“{{}}”这个符号-->
    <my-directive my-text="input"></my-directive>

    <script>
        var app = angular.module('watchDemo', []);
        app.directive('myDirective', function () {
            return {
                restrict: 'E',
                replace: true,
                template: '<p>自定义指令scope:<input type="text" ng-model="myText"></p>',
                scope: {
                    myText: '=' // 这里改成了双向绑定
                }
            }
        });
    </script>
</body>

效果:
这里写图片描述


(3)&:内部scope的函数返回值和外部scope绑定

示例代码:

<body ng-app="watchDemo">
    <!--外部scope-->
    <p>父scope:<input type="text" ng-model="input"></p>

    <!--内部隔离scope-->
    <!--注意这里,函数名字也要用 连字符命名法-->
    <my-directive get-my-text="input"></my-directive>

    <script>
        var app = angular.module('watchDemo', []);
        app.directive('myDirective', function () {
            return {
                restrict: 'E',
                replace: true,
                template: '<p>结果:{{ getMyText() }}</p>',
                scope: {
                    getMyText: '&' // 这里改成了函数返回值的绑定
                }
            }
        });
    </script>
</body>

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/VitaLemon__/article/details/52213103

angularjs的自定义directive指令的绑定策略scope:”@”、”=”、”&”

通常我们知道指令默认是可以跟外界通信的. 比如:      ...
  • alex8046
  • alex8046
  • 2016-08-24 14:15:09
  • 2995

AngularJS学习笔记之directive——scope选项与绑定策略(*******)

scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的。但是这...
  • baidu_31333625
  • baidu_31333625
  • 2016-10-21 14:22:18
  • 362

AngularJs directive-scope双向绑定方法处理-实例2

1.Html代码: 外部: 2.Js代...
  • u011127019
  • u011127019
  • 2016-06-16 18:55:03
  • 2992

AngularJs directive-scope

1.代码: 外部:{{myProperty}} var app = angular...
  • u011127019
  • u011127019
  • 2016-06-09 18:03:24
  • 351

AngularJS 自定义指令详解

除了 AngularJS 内置的63个指令外,我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令,HTML 元素上需要添加自定义指令名。使用驼峰法来命...
  • qq_27626333
  • qq_27626333
  • 2016-08-20 15:02:30
  • 8472

AngularJS自定义指令

一.restrict属性: 示例: var myModule = angular.module("MyModule", []); m...
  • bboyjoe
  • bboyjoe
  • 2016-03-01 11:28:44
  • 9619

angularJS 自定义指令间的相互交互

angularJS 自定义指令间的相互交互angularJS 自定义指令 transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用。默认值为false不能使用嵌套,tru...
  • outsiderlcy
  • outsiderlcy
  • 2016-11-10 09:12:06
  • 3407

AngularJS 自定义指令

本篇文章参考自AngularJS权威教程。 1. 简介  AngularJS中的指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以拓展该元素的功能,例如ng-click可以让一个元素能够...
  • qq_20448859
  • qq_20448859
  • 2016-08-02 15:13:03
  • 2624

AngularJS 优雅的自定义指令

学习要点 为什么使用指令 创建自定义指令 使用jqLite工作
  • super_yang_android
  • super_yang_android
  • 2016-06-10 19:58:07
  • 2325

angular中directive的scope用法

说明指令里有个scope属性,可以用来设置指令的作用域范围,默认值为false。默认值 scope:false不会有自己的作用域,即是直接使用父级的scope里的值。scope:true创建自己的作用...
  • lioldamon
  • lioldamon
  • 2017-05-13 14:46:01
  • 378
收藏助手
不良信息举报
您举报文章:AngularJS自定义指令directive:scope属性
举报原因:
原因补充:

(最多只允许输入30个字)