javascript 在 angularjs 中的非作用域变量上添加监视

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29643349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 10:48:52  来源:igfitidea点击:

add watch on a non scope variable in angularjs

javascriptangularjsangularjs-directiveangularjs-scope

提问by Adnan Ali

Is there a way to add watch to a non scope variable. I want to add a watch to local variable. I have something like this

有没有办法将监视添加到非作用域变量。我想向局部变量添加一个手表。我有这样的事情

 function EditAssetRegistryController(assetregistryService, manufacturerService, assettypeService, projectService, $localStorage, $routeParams) {
        var vm = this;
        vm.manufacturers = [];
        vm.projects = [];
        vm.asset_types = [];
        vm.ch_group_uniq = 'none';
}

here is there a way to add watch to vm.ch_group_uniq? I know how it will be done with scope variable but I have scenarios where I have to check many complex variables.

这里有一种方法可以将 watch 添加到 vm.ch_group_uniq 吗?我知道如何使用范围变量来完成,但我有一些场景,我必须检查许多复杂的变量。

采纳答案by Pankaj Parkar

$watchwill not work as normal syntax with controllerAs. You need to bind it to $scope, and then you can watch that variable:

$watch不会像正常语法一样使用controllerAs. 您需要将其绑定到$scope,然后您就可以观察该变量:

Code

代码

$scope.$watch(angular.bind(this, function (ch_group_uniq) {
  return this.ch_group_uniq;
}), function (newVal, oldVal) {
  console.log('Name changed to ' + newVal);
});

Here is the reference Todd Motto Article

这是参考托德座右铭文章

回答by Sacho

Well, you can easily add a watch for anythingby passing a function as the first parameter:

好吧,您可以通过将函数作为第一个参数传递来轻松地为任何内容添加监视:

$scope.$watch(function watchFunction(scope) {
    return vm.ch_group_uniq
}, handler)

A few things to consider: watchFunctionmust return the same valueif nothing has changed. This can lead to some gotchas, for example, returning the result of some array operations: [1,2,3].filter(...)will always return a new array, and lead to an endless $digestcycle. Also note the third parameter of $scope.$watch, which indicates whether to use an identity comparison, or angular.equalswhen comparing the values. (Check out the docs for further information - https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch)

需要考虑的几件事:如果没有任何变化,watchFunction必须返回相同的值。这可能会导致一些问题,例如,返回一些数组操作的结果:[1,2,3].filter(...)将始终返回一个新数组,并导致无限$digest循环。还要注意 的第三个参数$scope.$watch,它指示是否使用标识比较,或者angular.equals在比较值时。(查看文档了解更多信息 - https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

However, your specific problem seems to be trying to use controllerAsand custom $watch-es. There's a very handy library that addresses this issue specifically: https://github.com/christopherthielen/angular-360-no-scope

但是,您的具体问题似乎是尝试使用controllerAs和自定义$watch-es。有一个非常方便的库专门解决了这个问题:https: //github.com/christopherthielen/angular-360-no-scope

回答by Skylar Brown

A cleaner syntax using ES6

使用 ES6 的更简洁的语法

$scope.$watch(() => {
    return this.thingToWatch;
}, (newVal, oldVal) => {
    // Your code here...
});