AngularJS：範圍變量不夠快地更新

Question

我的指令中有以下代碼。

//Directive Code 
var BooleanWidgetController = function ($scope, $filter) { 

    $scope.booleanOptions = [ 
     { 
      displayText: '-- ' + $filter('i18n')('Widgets.Generics.Select') + ' --' 
     }, 
     { 
      value: 1, 
      displayText: $filter('i18n')('Widgets.Generics.Yes') 
     }, 
     { 
      value: 0, 
      displayText: $filter('i18n')('Widgets.Generics.No') 
     } 
    ]; 

    //Added inside watch because query was not being updated if filterUpdated was called using ng-change 
    $scope.$watch('query', $scope.filterUpdated); 
}; 

app.directive('acxBooleanColumnHeaderFilter', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     controller: ['$scope', '$filter', BooleanWidgetController], 
     scope: { 
      query: '=', 
      filterUpdated: '&submit', 
      columnHeading: '@' 
     }, 
     templateUrl: 'mailSearch/directives/columnHeaderWidgets/boolean/booleanColumnHeaderWidget.tpl.html' 
    }; 
}); 

//Template 
<div class="columnHeaderWidget"> 
<div class="title pull-left">{{columnHeading}}</div> 
<div style="clear:both"></div> 
<select ng-model="query" ng-options="option.value as option.displayText for option in booleanOptions"> 
</select> 

目前的辦法是工作的罰款。但是當我嘗試做這樣的事情。

<select ng-model="query" ng-change="filterUpdated" ng-options="option.value as option.displayText for option in booleanOptions"> 

$ scope.query的更新速度不夠快。所以$ scope.query在$ scope.filterUpdated被調用後被更新。我在這裏錯過了什麼？

Answer 1

這比看起來要複雜得多，如果你想了解真正的問題，請看看這個：「Explaining the order of the ngModel pipeline, parsers, formatters, viewChangeListeners, and $watchers」。總之，問題是：當觸發ng-change函數時，指令的綁定範圍屬性（在您的案例中爲query）已在指令的範圍內進行了更新，但未在其指定的範圍內進行更新繼承。

，我會建議將解決方法：

• 更改filterUpdated功能，這樣它會採取query從一個參數，而不是從它的scope服用它，因爲它的scope一直沒有更新了。

• 在您的指令的scope中創建一箇中間函數，以捕獲ng-change事件和更新的範圍屬性。

• 使用該中間函數調用filterUpdated函數並將query作爲參數傳遞。

事情是這樣的：

var BooleanWidgetController = function ($scope, $filter) { 

    $scope.booleanOptions = [ 
     { 
      displayText: '-- ' + $filter('i18n')('Widgets.Generics.Select') + ' --' 
     }, 
     { 
      value: 1, 
      displayText: $filter('i18n')('Widgets.Generics.Yes') 
     }, 
     { 
      value: 0, 
      displayText: $filter('i18n')('Widgets.Generics.No') 
     } 
    ]; 

    $scope._filterUpdated = function(){ $scope.filterUpdated({query:$scope.query}); };   

    /** Remove this, you won't need it anymore 
    ** $scope.$watch('query', $scope.filterUpdated); 
    **/ 
}; 

更改HTML，使它看起來像這樣：

<select ng-model="query" ng-change="_filterUpdated" ng-options="option.value as option.displayText for option in booleanOptions"> 

記住改變filterUpdated使用查詢作爲參數，如這：

function filterUpdated(query){ 
    ... 
}