今天学习指令,遇到了一些困惑:
<!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
First of all, what you wrote has little to do with instructions. The scope of the instruction's
scope
是影响它的template
is not here.The reason for undefined here is because the controller is executed before ng-init. You can use delay or
$watch
monitorWell,,, I understand the undefined above, but I am still a little confused about the latter one, that is to say, when
scope:{}
时,Inside myDirective : {{myProperty}}
这个表达式还是属于外面那个作用域是不是?而此时template里面并没有设定,,,所以隔离作用域就没有起作用,我这样理解对吗?还有一个问题,既然这样,,,那为什么如果把scope设定为
scope:true
is the following result:Can you give me some more advice? Thank you~~
scope true is an independent and isolated scope
{}, only the properties inside {} will be isolated