angular作用域

发布于
2016-02-01

今天学习指令，遇到了一些困惑：

    <!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>
    
    <div ng-init = 'someProperty="some date"'>
    
        <div ng-init='siblingProperty="moredata"'>
            Inside Div Two : {{aThirdProperty}}
    
            <div ng-init="aThirdProperty='data for 3rd property'" ng-controller="someCtrl">
                Inside Div Three:　{{aThirdProperty}}
    
                    <div ng-controller="secondCtrl">
                        Inside Div Four:　{{aThirdProperty}}
                        <br>
                        OutSide myDirective: {{myProperty}}
                        <div my-directive ng-init="myProperty='wow! that is cool'">
                            Inside myDirective : {{myProperty}}
                        </div>

                    </div>

            </div>

        </div>
    
    </div>
    
</body>
</html>

    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 Div Two :
    Inside Div Three:　data for 3rd property
    Inside Div Four:　data for 3rd property 
    OutSide myDirective: wow! that is cool
    Inside myDirective : wow! that is cool

angularjs

阅读 3.8k

3 个回答

得票最新

vczhan

2.6k258

发布于
2016-02-02

✓ 已被采纳

<div my-directive ng-init="myProperty='wow! that is cool'">
    Inside myDirective : {{myProperty}}
</div>

首先，你写的这个跟指令没多大关系。指令的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)
})

horizontal

28365272

发布于
2016-02-02

嗯，，，上面那个undefined我懂了，，不过后面那个我还是有点疑惑，，就是说当scope:{}时，Inside myDirective : {{myProperty}}这个表达式还是属于外面那个作用域是不是？而此时template里面并没有设定，，，所以隔离作用域就没有起作用，我这样理解对吗？
还有一个问题，既然这样，，，那为什么如果把scope设定为scope:true是下面这样的结果：

    Inside Div Two :
    Inside Div Three:　data for 3rd property
    Inside Div Four:　data for 3rd property 
    OutSide myDirective:
    Inside myDirect33ive : wow! that is cool

能否再指点一下，，，谢谢~~

尹口习习

522

发布于
2016-02-02

新手上路，请多包涵

scope true就是独立隔离的作用域
{}的话只有{}内部有的属性会被隔离开来

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进