如何观察多个变量的角度变化
如何$scope.$watch在Angular中使用多个变量，并在其中之一发生更改时触发回调。
$scope.name = ...
$scope.age = ...
$scope.$watch('???',function(){
//called when name or age changed
})
问题答案：
更新
Angular现在提供了两种范围方法$
watchGroup
（从1.3开始）和$watchCollection。这些已被@blazemonger和@kargold提及。
这应该独立于类型和值而工作：
$scope.$watch('[age,name]', function () { ... }, true);
在这种情况下，您必须将第三个参数设置为true。
'age + name'在这种情况下，字符串连接将失败：
<button ng-init="age=42;name='foo'" ng-click="age=4;name='2foo'">click</button>
在用户单击按钮之前，监视的值将是42foo（42+ foo），而在单击42foo（4+
2foo）之后。因此，不会调用watch函数。因此，如果不能确保最好使用数组表达式，则不会出现这种情况。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
<script src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-mocks.js"></script>
<script>
angular.module('demo', []).controller('MainCtrl', function ($scope) {
$scope.firstWatchFunctionCounter = 0;
$scope.secondWatchFunctionCounter = 0;
$scope.$watch('[age, name]', function () { $scope.firstWatchFunctionCounter++; }, true);
$scope.$watch('age + name', function () { $scope.secondWatchFunctionCounter++; });
});
describe('Demo module', function () {
beforeEach(module('demo'));
describe('MainCtrl', function () {
it('watch function should increment a counter', inject(function ($controller, $rootScope) {
var scope = $rootScope.$new();
scope.age = 42;
scope.name = 'foo';
var ctrl = $controller('MainCtrl', { '$scope': scope });
scope.$digest();
expect(scope.firstWatchFunctionCounter).toBe(1);
expect(scope.secondWatchFunctionCounter).toBe(1);
scope.age = 4;
scope.name = '2foo';
scope.$digest();
expect(scope.firstWatchFunctionCounter).toBe(2);
expect(scope.secondWatchFunctionCounter).toBe(2); // This will fail!
}));
});
});
(function () {
var jasmineEnv = jasmine.getEnv();
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function (spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body></body>
</html>
http://plnkr.co/edit/2DwCOftQTltWFbEDiDlA?p=preview
PS：
如@reblace在评论中所述，当然可以访问这些值：
$scope.$watch('[age,name]', function (newValue, oldValue) {
var newAge = newValue[0];
var newName = newValue[1];
var oldAge = oldValue[0];
var oldName = oldValue[1];
}, true);
-
问题内容： 我想知道是否有什么办法可以在程序运行时观察变量值的变化。当然不使用调试器，我想以 编程方式进行 。例如： 因此，在运行时，如果在我的项目中任何类的任何方法中修改了此value 事件，则应调用该事件。 问题答案： 您需要用一个类替换该类型，该类将在值更改时调用您的侦听器。您可能想忽略未实际更改的值的设置。 例如 您可以使用字节码注入执行此替换，但是更改原始代码非常简单。 一种替代方法是监
-
学习角得到服务和组件和可观察性。 我正在尝试在我的演示应用程序中实现暗模式。该控件由一个服务完成，该服务根据浏览器默认值（如果找到）设置暗主题。 它在应用程序组件中初始化，以便以后在应用程序中放置控制开关。 暗模式从布尔值开始工作，因此为true或false。据我所知，使用一个可观察对象是不够的，因为我希望多个订阅者都以两种方式绑定到订阅，每种方式在服务中切换这些可观察对象。到目前为止，我很肯定这
-
问题内容： 这似乎是一个愚蠢的问题，但是我需要知道如何监视页面的整个DOM并在页面发生任何变化时重新对其进行编译。本质上，这是AngularJS在默认情况下通过使用数据绑定来执行的操作，但是我需要在DOM中的任何内容发生变化时（不仅是绑定）发生这种情况。原因是因为我有一个完全用HTML，Javascript和PHP构建的应用程序。它是一个单页应用程序，具有一个主页，并将PHP注入该页面内的DIV包
-
问题内容： 在Javascript中，当使用基于推，弹出，移位或基于索引的分配修改数组时，是否有通知方法？我想要能够触发我可以处理的事件的东西。 我知道SpiderMonkey 的功能，但是仅当整个变量设置为其他值时，该功能才起作用。 问题答案： 有一些选择… 1.覆盖推送方法 走快速而肮脏的路线，您可以覆盖数组1的方法： 1或者，如果要定位 所有 数组，则可以覆盖。但是要小心；您环境中的其他代码
-
我有一个组件订阅服务中的一个可观察对象。该方法反过来订阅另一个服务中的可观察对象。我想将一个数组从最后一个服务传递回第一个服务，然后第一个服务将该数组传递回组件。更具体地说，该组件调用其本地服务，然后调用一个数据服务，该数据服务通过http客户端访问我的数据库。http客户端正在工作，数据服务将数组返回给本地服务。本地服务接收数组，但我不知道如何将该数组作为可观察对象传递回组件。以下是简短的代码块
-
问题内容： 我遇到了一个旧的可变高度导航问题：顶部导航，底部导航。异步加载数据时，导航可以更改高度，因此内容的边距也必须随之更改。 我希望这是自给自足的。因此，没有代码在何处加载数据，而仅在涉及的html-elements / directives中。 目前，我正在AngularJS 1.2.0中使用如下计时器进行操作： 这有一个明显的 缺点，那就是使用计时器 （我觉得这很丑陋），并且 在调整导航