今天學習指令,遇到了一些困惑:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="../css/lib/bootstrap4.css">
<script type="text/javascript" src='../js/lib/angular.js' ></script>
<script type="text/javascript" src='js/scope2.js'></script>
</head>
<body>
<p ng-init = 'someProperty="some date"'>
<p ng-init='siblingProperty="moredata"'>
Inside p Two : {{aThirdProperty}}
<p ng-init="aThirdProperty='data for 3rd property'" ng-controller="someCtrl">
Inside p Three: {{aThirdProperty}}
<p ng-controller="secondCtrl">
Inside p Four: {{aThirdProperty}}
<br>
OutSide myDirective: {{myProperty}}
<p my-directive ng-init="myProperty='wow! that is cool'">
Inside myDirective : {{myProperty}}
</p>
</p>
</p>
</p>
</p>
</body>
</html>
js
var app = angular.module('app', []);
app.controller('someCtrl', ['$scope', function($scope){
}])
app.controller('secondCtrl', ['$scope', function($scope){
console.log($scope.myProperty) //undefined
}])
app.directive('myDirective',function(){
return {
restrict :'A',
scope:false
}
})
為什麼印出來的是undefined?
接著把js指令裡的scope改為scope:{}
;為什麼彈出來的是這個?是說為什麼外面的OutSide myDirective: wow! that is cool
會有值?
Inside p Two :
Inside p Three: data for 3rd property
Inside p Four: data for 3rd property
OutSide myDirective: wow! that is cool
Inside myDirective : wow! that is cool
首先,你寫的這個跟指令沒什麼關係。指令的
scope
是影响它的template
的作用域,這裡並不是。這裡undefined的原因是因為controller在ng-init之前執行了。可以用延時或
$watch
監聽嗯,,,上面那個undefined我懂了,,不過後面那個我還是有點疑惑,,就是說當
scope:{}
时,Inside myDirective : {{myProperty}}
这个表达式还是属于外面那个作用域是不是?而此时template里面并没有设定,,,所以隔离作用域就没有起作用,我这样理解对吗?还有一个问题,既然这样,,,那为什么如果把scope设定为
scope:true
是下面這樣的結果:能否再指點一下,,謝謝~~
scope true就是獨立隔離的作用域
{}的話只有{}內部有的屬性會被隔離