AngularJS指令不更新回調範圍

Question

我正在使用指令在AngularJS 1.5中創建組件庫。因此，我的指示需要隔離範圍。

我的一些指令有回調，所以你可以傳入一個函數來被指令調用。但是，當該指令調用該回調函數時，似乎並沒有像我期望的那樣完全更新$ scope屬性的更改。

這裏是一個Plunker，顯示此行爲： http://embed.plnkr.co/Rg15FHtHgCDExxOYNwNa/

下面是代碼的樣子：

<script> 
    var app = angular.module('myApp', []); 
    app.controller('Controller', ['$scope',function($scope) { 
     // initialize the value to something obvious 
     $scope.clickersValue = "BEFORE"; 

     // when this call back is called we would expect the value to be updated by updated by the directive 
     $scope.clickersCallback = function() { 
     //$scope.$apply(); // $apply is not allowed here 
     $scope.clickersValueRightAfterCall = $scope.clickersValue; 
     console.log("clickersCallback: scope.clickersValue", $scope.clickersValue); 
    }; 
    } 
]); 

app.directive('clicker', [function() { 
    return { 
    restrict: 'EA', 
    template: '<div ng-click="clicked()">click me!</div>', 
    controller: ['$scope', function($scope) { 
     $scope.clicked = function() { 
     console.log("you clicked me."); 
     $scope.newValue = 'VALID'; 
     $scope.myUpdate(); 
     } 
    }], 
    scope: { 
     "newValue": "=", 
     "myUpdate": "&" 
    } 
    }; 
}]); 
</script> 

所以當clickersCallback被調用的clickersValue屬性仍然有舊值。我曾嘗試使用$ scope。$ apply，但當然當另一個更新發生時它是不允許的。我也嘗試使用controller_bind，但得到了同樣的效果。

Answer 1

將代碼包裝在clickersCallback函數中的$timeout函數中。

$timeout(function() { 
    $scope.clickersValueRightAfterCall = $scope.clickersValue; 
    console.log("clickersCallback: scope.clickersValue", $scope.clickersValue); 
}); 

Updated plunker

的$超時不會產生類似「$消化正在進行中」錯誤，因爲$超時告訴角度，目前的週期後，有一個超時等待，這樣就保證了那麼digest循環之間不會有任何衝突，因此$ timeout的輸出將在新的$ digest循環上執行。 source

編輯1：由於OP低於所述，該指令的用戶不應該寫在他的回調函數的任何「特殊」的代碼。

爲了實現這種行爲，我將$ timeout從de控制器更改爲指令。

控制器回調函數（沒有改變）：

$scope.clickersCallback = function() { 
    $scope.clickersValueRightAfterCall = $scope.clickersValue; 
    console.log("clickersCallback: scope.clickersValue", $scope.clickersValue); 
}; 

指令碼（注入$超時的指令）：

$scope.clicked = function() { 
    console.log("you clicked me."); 
    $scope.newValue = 'VALID'; 
    $timeout(function() { 
     $scope.myUpdate(); 
    }); 
} 

Updated plunker