角指令代碼更改範圍，但是模板顯示相同的數值

Question

我有類似下面的指令：

.directive('myDirective', function() { 
    return { 
     restrict: 'AE', 
     replace: true, 
     templateUrl: '/myDirective.html?v=' + window.buildNumber, 
     link: function (scope, element, attrs) { 
      scope.itemClasses = attrs.itemClasses || ''; 
     } 
    } 
}) 

，它的模板看起來像：

<div class="my-directive"> 
    <div class="items" ng-repeat="item in items"> 
     <div class="item {{ itemClasses }}">{{ item.title }}</div> 
    </div> 
</div> 

和指令調用不同地址（每個模板一個呼叫），如下所示：

<my-directive item-classes="col-md-6"></my-directive> 
... 
<my-directive item-classes="col-md-12"></my-directive> 

並且所有模板都呈現相同的值itemClasses。同時鏈接功能設置適當的值（我通過console.log()的電話查看了這個事實）。

如果我將scope: true屬性添加到指令的代碼 - 那麼一切正常。所以，它似乎有自己的繼承範圍幫助。你能解釋我這種行爲嗎？

謝謝。

Answer 1

當你使用scope: true時，你爲你的指令創建一個子範圍，同時你也從父類繼承屬性（在這種情況下，我認爲你的控制器）。所以你的指令的所有實例都有適當的範圍。

使用scope: false您的指令實際上沒有範圍，它與其父項共享範圍。

所以，回到你的問題，有scope:false，當你這樣做：

scope.itemClasses = attrs.itemClasses || '';

您在itemClasses屬性設置爲父的範圍。 這意味着，當你在鏈接函數中看到它似乎工作正常，但實際上每次你要覆蓋控制器的相同範圍變量。

所以，你的情況，你第一次一個範圍變量父控制器關聯：

scope.itemClasses= 'col-md-6';

，但第二次其實你覆蓋父範圍相同的變量，新的價值：

scope.itemClasses= 'col-md-12';

是否有意義？

Answer 2

通過直接綁定item-classes屬性，你基本上是複製屬性的值。

對此的解決辦法是：如果你想input-classes輸入綁定你可以使用隔離範圍，像這樣：

{ 
    restrict: 'AE', 
    replace: true, 
    scope: { 
     itemClasses: '=' 
    }, 
    templateUrl: '/myDirective.html?v=' + window.buildNumber, 
    link: function (scope, element, attrs) { 
     // scope.itemClasses = attrs.itemClasses || ''; 
    } 
} 

或者萬一你不想使用隔離範圍，則可以用戶attrs.$observe：

link: function (scope, element, attrs) { 
    attrs.$observe('itemClasses ', function(val) { 
     scope.itemClasses = val || ''; 
    }); 
}