问题描述
今天学习指令，遇到了一些困惑：
<!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='https://www.6hehe.com/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
问题解答
回答1：<p my-directive ng-init='myProperty=’wow! that is cool’'> Inside myDirective : {{myProperty}}</p>
首先，你写的这个跟指令没多大关系。指令的scope是影响它的template的作用域，这里并不是。
app.controller(’secondCtrl’, [’$scope’, function($scope){ console.log($scope.myProperty) //undefined}])
这里undefined的原因是因为controller在ng-init之前执行了。可以用用延时或者$watch监听
$timeout(function() { console.log($scope.myProperty)});// or$scope.$watch(’myProperty’, function(newVal) { console.log($scope.myProperty)})回答2：
嗯，，，上面那个undefined我懂了，，不过后面那个我还是有点疑惑，，就是说当scope:{}时，Inside myDirective : {{myProperty}}这个表达式还是属于外面那个作用域是不是？而此时template里面并没有设定，，，所以隔离作用域就没有起作用，我这样理解对吗？还有一个问题，既然这样，，，那为什么如果把scope设定为scope:true是下面这样的结果：
Inside p Two : Inside p Three: data for 3rd property Inside p Four: data for 3rd property OutSide myDirective: Inside myDirect33ive : wow! that is cool
能否再指点一下，，，谢谢~~
回答3：scope true就是独立隔离的作用域{}的话只有{}内部有的属性会被隔离开来
