如何在循環內動態創建Angular手表

Question

我希望能夠在一個或多個模型屬性上動態創建有角度的手表。 為此，我嘗試了以下操作：

var fields = ['foo', 'bar'];
for (var i=0, n=fields.length; i<n; i++) {
    $scope.$watch('vm.model.' + fields[i], function(newValue, oldValue) {
        console.log(fields[i]); //always 'bar'
        //logic that was not giving the expected results
    });
}

但是，這總是在循環的每次迭代中都使用數組的最后一個元素。 我以前使用異步代碼時已經看到過這種行為，這可能在這里起作用。 如果可以，該如何解決？

Answer 1

這是因為“在將觀察者注冊到范圍之后，將異步調用監聽者fn（通過$evalAsync ）以初始化觀察者” － 請參閱文檔並在頁面中搜索$ watch的第一個實例。

考慮到這一點，應該在每次循環迭代時通過委派另一個函數來輕松解決，如下所示：

var fields = ['foo', 'bar'];
for (var i=0, n=fields.length; i<n; i++) {
    createWatch(fields[i]);
}
function createWatch(field) {
    $scope.$watch('vm.model.' + field, function(newValue, oldValue) {
        console.log(field); //'foo' on first iteration, 'bar' on next
        //logic that should now give the expected result
    });
}