一路斜阳
一路斜阳

自定义指令directive的作用域和绑定策略

在自定义指令的时候，我们会对scope进行设置。

1、默认值为false

表示继承父作用域。这时对于父作用域的修改会影响到指令中对应的值，也就是说是双向绑定的。

myApp.html

<body ng-controller="directive-controller">
    parent:<input type="text" ng-model="parentModel"/>

    <div scope-false>div>
body>
html>

directive.js

myApp.controller("directive-controller", function () {

})
    .directive('scopeFalse', function() {
        return {
            restrict: "A",
            scope:false,
            template: function (ele, attr) {
                return "childrenScopeFalse:"
            }
        }
    })

2、true

表示继承父作用域，同时创建自己的作用域。这时在html初始化完成之后，指令中的值为父作用域的值。

myApp.html

<body ng-controller="directive-controller">
    parent:<input type="text" ng-model="parentModel"/>

    <div scope-true>div>
body>
html>

directive.js

myApp.controller("directive-controller", function () {

})
    .directive('scopeFalse', function() {
        return {
            restrict: "A",
            scope:false,
            template: function (ele, attr) {
                return "childrenScopeTrue:"
            }
        }
    })


（1）未对指令中的值进行修改时，改变父作用域的值，指令的值也会改变。但是改变指令中的值父作用域不改变。自定义指令directive的作用域和绑定策略_第1张图片

（2）若对指令中的值已经进行了修改，再修改父作用域的值，此时指令中的值不再改变了。自定义指令directive的作用域和绑定策略_第2张图片

3、{}

表示创建隔离作用域。此时指令与父作用域是互不影响的。

自定义指令directive的作用域和绑定策略_第3张图片

可是，有的时候我们希望在指令中访问父作用域中的值，此时可以通过绑定策略来实现。

绑定策略分为三种：

（1）‘@’

（2）‘=’

（3）‘&’

-------未完待续------

你可能感兴趣的:(angularJS,web前端)