Rumah > Soal Jawab > teks badan
<body ng-app="myApp">
<p ng-controller="MainController">
Outside myDirective:{{myProperty}}
<p my-directive ng-init="myProperty='wow,this is coll'">
Inside myDirective:{{myProperty}}
</p>
</p>
这是html的文件
下边是js的
1 scope=true
.directive('myDirective',function () {
return {
restrict:'A',
//scope:{},
scope:true,
priority:100,
template:'<p>Inside myDirective {{myProperty}}</p>'
};
});
ff下显示
Outside myDirective:
Inside myDirective wow,this is coll
2 scope {}
.directive('myDirective',function () {
return {
restrict:'A',
scope:{},
priority:100,
template:'<p>Inside myDirective {{myProperty}}</p>'
};
});
ff 下显示
Outside myDirective:wow,this is coll
Inside myDirective
scope:true; 将会创建一个新的作用域出来,所以本级可以读到myPropery上一级读取不到
scope:{},为甚么上一级可以读到!本级读取不到呢?
这个实在能晕了!不懂啊!请各位指点!谢谢
ringa_lee2017-04-10 16:19:46
非常有意思的问题。
我自己测试了一下,源码贴这里
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="myApp">
<p ng-controller="MainController">
Outside myDirective:{{myProperty}}
<p my-directive ng-init="myProperty='wow,this is coll'">
Inside myDirective:{{myProperty}}
</p>
</p>
<script type="text/javascript">
angular.module("myApp", [])
.controller("MainController", function(){
})
.directive('myDirective',function () {
return {
restrict:'A',
//scope: {},
scope: true,
priority:1000,
template:'<p>Inside myDirective {{myProperty}}</p>'
};
});
</script>
</body>
</html>
第一, 我们需要搞清楚 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
no scope + no scope => Two directives which don't require their own scope will use their parent's scope
child scope + no scope => Both directives will share one single child scope
child scope + child scope => Both directives will share one single child scope
isolated scope + no scope => The isolated directive will use it's own created isolated scope. The other directive will use its parent's scope
isolated scope + child scope => Won't work! Only one scope can be related to one element. Therefore these directives cannot be applied to the same element.
isolated scope + isolated scope => Won't work! Only one scope can be related to one element. Therefore these directives cannot be applied to the same element.
我们的问题应该符合下面两种情况
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/32