什麼是AngularJS裏面的指令範圍

Question

我正在學習angular，我是從jQuery的背景和麪臨問題得到的角度。所以我經常磕磕絆絆來理解角碼中的許多事情。

剛剛看到下面的代碼，我不明白在下面的指令中做什麼範圍？

但是，如果我從下面的指令中刪除範圍，那麼哪些不起作用？ 所以如果可能的話，請幫助我理解示例的用法及其重要性。由於

<li my-directive price="item.price" ng-repeat="item in products">{{item.name}} &mdash; {{item.price}}</li> 

    myApp.directive('myDirective', function(){ 
     return { 
     scope: { price: '=' }, 
     require: 'ngModel', 
     link : function(scope){ 
      console.log(scope.price) 
     }, 
     controller: function(scope, element, attrs, ngModel){ 
      console.log(ngModel.price); 
      console.log(scope.price); 
     } 
     } 
    }); 

Answer 1

在此示例中，您有scope: { price: '=' }，指出內部範圍變量指令price恰好綁定到家長的範圍。它有權訪問它，我重視父範圍的變化，指令的值爲price也會改變。

從您的指令scope: { ... }中刪除此行，然後您的指令將不會創建新的範圍。但它仍然有效 - 意味着它不會產生錯誤。有需要或不需要有isolated scopes的用例。

爲了找出更好的東西如何與角度和範圍的工作 - 請檢查下面的大資源：

1. 角VS jQuery的 - "Thinking in AngularJS" if I have a jQuery background?
2. $範圍本身的角度 - How does data binding work in AngularJS?
3. 各種指令中的範圍變量類型 - What is the difference between '@' and '=' in directive scope in AngularJS?

Answer 2

如果您沒有提到範圍配置對象，您的指令將使用父級的範圍，但是當您提到範圍對象時，它會創建它自己的獨立範圍。

所以，如果你沒有提到範圍對象，你將有權直接訪問父控制器中的變量。

裁判：http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/