angualrjs - 如何设置AngularJS自定义指令的隔离作用域？

问题描述

问 题

通过设置scope属性我们可以给angularJS的自定义属（false true {}）性设置不同范围的作用域。

HTML:

<div>
    Outside myDirective: {{ myProperty }}
    <div my-directive ng-init="myProperty='Hello world!'">
        Inside myDirective: {{ myProperty }}
    <div>
</div>

JS:

angular.module('myApp', [])
    .directive('myDirective', function() {
        return {
            restrict: 'A',
            scope: {}
        };
    })

设置为{}时，自定义指令里为外界形成隔离作用域，期望中应该是外部的myProperty为空值，可是却也能输出 Hello wolrd!
请教为何，谢谢

解决方案

我是这样理解的
scope: true时，产生一个子作用域(child scope)，子作用域继承父作用域，它的作用域只包括template里面的代码，这里你没有写；

scope: {}时，产生一个隔离的作用域，其实它也是一个子作用域，不过它并没有继承父作用域，它的作用域范围也只有template里面的代码；

也就是说scope: true和scope:{}的作用域都不包括ng-init

还有你的Outside myDirective: {{ myProperty }}和Inside myDirective: {{ myProperty }}是一直在同一个作用域的，要使Inside myDirective: {{ myProperty }}隔离，请把它写到template里面，另外ng-init也要写到template里面，才能形成你说的隔离作用域。

这篇关于angualrjs - 如何设置AngularJS自定义指令的隔离作用域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！