关于ng指令隔离作用域的问题
<body ng-app="myApp">
<div ng-controller="MainController">
Outside myDirective:{{myProperty}}
<div my-directive ng-init="myProperty='wow,this is coll'">
Inside myDirective:{{myProperty}}
</div>
</div>这是html的文件
下边是js的
1 scope=true
.directive('myDirective',function () {
return {
restrict:'A',
//scope:{},
scope:true,
priority:100,
template:'<div>Inside myDirective {{myProperty}}</div>'
};
});
ff下显示
Outside myDirective:
Inside myDirective wow,this is coll
2 scope {}
.directive('myDirective',function () {
return {
restrict:'A',
scope:{},
priority:100,
template:'<div>Inside myDirective {{myProperty}}</div>'
};
});ff 下显示
Outside myDirective:wow,this is coll
Inside myDirective scope：true； 将会创建一个新的作用域出来，所以本级可以读到myPropery上一级读取不到
scope：{}，为甚么上一级可以读到！本级读取不到呢？
这个实在能晕了！不懂啊！请各位指点！谢谢
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
-
码农|Coder| Pythonista
第一, 我们需要搞清楚 scope:true 和 scope:{} 的含义:
scope:true 产生一个子作用域 (child scope)
scope:{} 产生一个隔离作用域 (isolated scope)
第二, ngInit是干什么的
https://docs.angularjs.org/api/ng/directive/ngInit
在当期作用域下执行一个表达式，指令优先级是450，当然这个问题和优先级无关。
ngInit源码 https://github.com/angular/angular.js/blob/master/src/ng/directive/ngInit.js
注意它没有设置scope第三，在同一个元素上使用多个指令的时候，作用域该如何计算
参见官方文档
https://docs.angularjs.org/api/ng/service/$compile我们的问题应该符合下面两种情况
isolated scope + no scope: ngInit 使用父作用域(也就是MainController的scope)，myDirective使用自己的隔离作用域
child scope + no scope: ngInit 和 myDirective 共同使用子作用域另外关于angular指令这块，你可以多看看youtube上的视频，我这里有两篇笔记，希望可以对你有帮助
https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/31
https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/322019-07-17 19:43:24赞同 展开评论