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

最新推荐文章于 2022-09-27 19:22:27 发布

一路斜阳

最新推荐文章于 2022-09-27 19:22:27 发布

阅读量1.5k

点赞数

文章标签： web前端

本文链接：https://blog.csdn.net/zhaoruda/article/details/47913655

版权

angularJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在自定义指令的时候，我们会对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:<input type='text' ng-model='parentModel'/>"
            }
        }
    })

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:<input type='text' ng-model='parentModel'/>"
            }
        }
    })