搜尋

首頁  >  問答  >  主體

angular.js - angular作用域

今天學習指令,遇到了一些困惑:

    <!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
PHP中文网PHP中文网2744 天前526

全部回覆(3)我來回復

  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-15 17:00:35

    <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)
    })

    回覆
    0
  • 阿神

    阿神2017-05-15 17:00:35

    嗯,,,上面那個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

    能否再指點一下,,謝謝~~

    回覆
    0
  • PHP中文网

    PHP中文网2017-05-15 17:00:35

    scope true就是獨立隔離的作用域
    {}的話只有{}內部有的屬性會被隔離

    回覆
    0
  • 取消回覆