带有范围变量和数组的AngularJS watchCollection
在我的控制器中,我有一些范围变量,如带有范围变量和数组的AngularJS watchCollection,angularjs,Angularjs,在我的控制器中,我有一些范围变量,如 $scope.searchText = "abc"; $scope.currentPage ="1"; $scope.sortBy ="dateTime"; $scope.sortOrder="reverse"; $scope.columnSettings = [ {"name": "dateTime, "displayName": "Datetime",
$scope.searchText = "abc";
$scope.currentPage ="1";
$scope.sortBy ="dateTime";
$scope.sortOrder="reverse";
$scope.columnSettings = [
{"name": "dateTime,
"displayName": "Datetime",
"filterText": ""
},
{"name": "name,
"displayName": "Name",
"filterText": "xyz"
},
{"name": "id,
"displayName": "ID",
"filterText": ""
}]
我需要监视“columnSettings”数组中对象的所有$scope变量和“filterText”键
我正在使用
$scope.$watchCollection('[searchText, sortBy, sortOrder, currentPage, itemsPerPage, columnSettings]', function(newVal, oldVal){
// Ignore initial scope change
if(oldVal && newVal !== oldVal){
// watch is triggered for changes in searchText, sortBy etc...
// but not for "filterText" change in columnSettings
}
});
我的问题是
a) 对于searchText、sortBy、currentPage等的更改,会触发监视,但对于columnSettings中的“filterText”更改,则不会触发监视。我怎样才能解决这个问题
b) 另外,我只想在“filterText”键更改时触发watch,而不想在其他键更改时触发watch
非常感谢您的帮助。如果您只想获得有关对象某个属性更改的通知,只需添加
$watch
,如下所示:
$scope.$watchCollection('columnSettings', function (obj) {
// handle obj.filterText change
});
您不能将
columnSettings
添加到$watchCollection
中,因为它本身就是一个集合,所以不幸的是,它必须单独监视。我猜filterText
是由您网页上的输入填充的。
在这种情况下,您应该在模板中(在每个输入上)使用ng change
属性,这可能会触发$scope
上的事件处理程序。
正如Davin在评论中所指出的,你试图做的通常是一个坏主意(除非在一些罕见的情况下我无法想象)。我最后就是这样做的
$scope.$watchCollection('[searchText, sortBy, sortOrder, currentPage, itemsPerPage]', function(newVal, oldVal){
}))
并使用$watch进行列设置,只查看“filterText”更改
你真的不应该看所有这些。如果将它们绑定到模板,则会为您创建一个
watch
(这是双向绑定)。我很想知道你为什么认为你需要像这样观看一切所有这些值都绑定到模板,用户可以更改模板。对于每个更改,我都需要操纵几个值,并对后端进行http.get调用。有没有更好的方法可以做到这一点?对于“searchText中的每个按键”,您都要进行http调用?这听起来不太好。如果您以某种方式触发http调用(比如单击按钮),那么在调用服务器之前,这可能是一个更好的安排数据的地方。但是,如果没有更多的代码(比如HTML模板),就不可能进一步评论。是的,这是我的要求。每次更改都需要$http.GET。columnSettings是一个数组。美元手表可以这样使用吗?这似乎有点可笑(这是在观察数组中对象内部的所有filterText
s吗?)我希望有一个地方可以观察所有变量,避免同时使用$watchCollection和$watch。此外,columnSettings是一个数组。我不确定是否可以使用columnSettings.filterText.@user3701057,Angular需要记住的一点是,使用$watch的费用加起来相当昂贵。我们应该尽可能避免使用它。Angular已经通过模板绑定为您添加了一些$watch。是的,伙计们,你是对的@user3701057我不认为你可以把它减少到一个值班电话。检查我编辑的答案。;)是的,ng change
确保脏检查仅由UI更改触发,因此不会持续涉及摘要循环。如果事件处理程序要在服务器上获取数据,则还需要使用限制(通常:仅在最后一秒未编辑输入后调用服务器)
$scope.$watch(function($scope) {
return $scope.columnSettings.
map(function(obj) {
return obj.filterText
});
}, function(newVal, oldVal){
});