AngularJS指令隔離範圍行爲

Question

我正在通過一些教程試圖鞏固我對隔離作用域的把握，我遇到了一些問題。我得到了很高的概念，但我試圖證明我看到我不明白的一些行爲。在高層次上我的理解是，附加工作這樣的選項：

@ - 讓你在一個字符串 &飼料 - 提供了一個雙向數據綁定 = - 提供雙向數據綁定

因此，考慮下面的代碼：

<div ng-app="choreApp"> 
    <div ng-controller="ChoreCtrl"> 
    <kid done="logChore(chore)"></kid> 
    </div> 
</div> 

var app = angular.module('choreApp', []); 

app.controller("ChoreCtrl", function($scope){ 
    $scope.logChore = function(chore){ 
    alert(chore + " is done!"); 
    }; 
}); 

app.directive("kid", function() { 
    return { 
    restrict: "E", 
    scope: { 
     done: "&" 
    }, 
    template: '<input type="text" ng-model="chore">' + 
     '{{chore}}' + 
     '<div class="button" ng-click="done({chore: chore})">I\'m done</div>' 
    }; 
}); 

以上是有線了OK，與「&」的logChore功能工作，一切都很好。

'@'不像預期的那樣工作，因爲它只是讀取一個字符串，當我點擊沒有任何反應。

但是，我也希望'='工作正常，因爲它只是一個雙向綁定，但實際發生的是該函數執行三次而沒有對我的任何操作（點擊），然後似乎作爲正常。爲什麼該函數執行三次？

Answer 1

當您使用雙向綁定（「=」）與done="logChore(chore)"，調用logChore(chore)被分配到done的結果 - 不是函數本身（如&一樣）。

因此，每次角度呼叫$watch看看它正在觀看的東西是否已經改變了函數logChore(chore)被調用。由於骯髒的檢查$watch通常每$digest循環多次評估觀察列表 - 這就是爲什麼你看到3次執行（你會看到更多的時間發生觸發$digest）。

爲了通過使用=當函數本身，你可以這樣做：

<kid done="logChore"></kid> 

並更改模板苦差事通過像這樣：

ng-click="done(chore)" 

下面是工作的a fiddle 。

此外，我不認爲@作爲傳遞字符串，我認爲它更廣泛地作爲單向數據綁定。這是單向的，因爲父範圍的更改會反映在指令中，但指令隔離範圍的更改不會反映在父代中。