ng-change後更新的AngularJS範圍

Question

我有一個指令集中我的選擇的HTML和功能，但我有一個問題，ng-model在ng-change發生後正在更新。

這裏有一個集中的jsfiddle例如：

http://jsfiddle.net/U3pVM/1568/

（代碼，因爲SO否則抱怨）

HTML：

<div ng-app="myApp">  
    <div ng-controller="MainCtrl"> 
     <p>fooId is currently : {{fooId}}</p> 

     <app-drop-down model="fooId" options="fooOptions" opt-value="id" opt-label="label" on-change="dropDownChanged"></app-drop-down> 
    </div> 
</div> 

JS：

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

app.controller('MainCtrl', function ($scope, $log) { 
    $scope.fooId = -1; 

    $scope.fooOptions = [{ 
     id: 1, 
     label: "A" 
    }, { 
     id: 2, 
     label: "B" 
    }]; 

    $scope.dropDownChanged = function (id) { 
     $log.info('changed : ' + $scope.fooId + ' but really: ' + id); 
    }; 
}); 

app.directive('appDropDown', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      model: '=', 
      options: '=', 
      onChange: '=' 
     }, 
     template: 
      '<div><select ng-model="model" ng-options="a[optValue] as a[optLabel] for a in options" ng-change="changed()"></select></div>', 
     link: function (scope, element, attrs) { 
      scope.optValue = attrs.optValue; 
      scope.optLabel = attrs.optLabel; 

      scope.changed = function() { 
       scope.onChange(scope.model); 
      }; 
     } 
    }; 
}); 

控制檯日誌：

變化：-1，但真正做到：1

改變：1，但真正：2

當你改變選擇到A，然後B.

這是更新但在ng-change被觸發後。

很顯然，我可以解決此通過傳遞ID（像我這樣做），或在該值時，控制器使用$手錶，但這是不理想的某些更復雜的情況。

任何想法？

Answer 1

我知道這是有點事後，但我有一個類似的問題，搜索周圍，我也發現這個問題。由於似乎沒有真正的答案，我想要發佈我最終做的事情，因爲它可能會在未來幫助其他人。這似乎爲我的情況下工作（和你的小提琴一樣），但因爲我纔剛剛開始使用AngularJS，我可能會做對「規則」，因此任何專家，隨時糾正我的東西......

總之，這裏是你的小提琴的更新版本與我的變化：

http://jsfiddle.net/5vb5oL7e/1/

這裏是指令的實際代碼：

app.directive('appDropDown', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     model: '=', 
     options: '=', 
     onChange: '=' 
    }, 
    template: 
     '<div><select ng-model="model" ng-options="a[optValue] as a[optLabel] for a in options"></select></div>', 
    link: function (scope, element, attrs) { 
     scope.optValue = attrs.optValue; 
     scope.optLabel = attrs.optLabel; 
     scope.$watch('model', function(newValue, oldValue) 
     { 
      // Execute function on change 
      if (scope.onChange !== undefined && 
      newValue !== undefined && oldValue !== undefined) 
      { 
      scope.onChange(); 
      } 
     }); 
    } 
    }; 
}); 

基本上，我所做的就是添加觀看模型上的鏈接功能。在此手錶內部，我在定義時觸發onChange功能。加入未定義的新舊價值增加的檢查，以防止功能改變在頁面加載不需要的。

希望這可以幫助別人......

親切的問候， 海諾