在AngularJS中观看对象

Question

我正在使用AngularJs 2，并且在观看对象时遇到困难。

我在指令中有一个类似于以下内容的对象：

scope.timelineFilter = {hasCapacity: true, onlyActivated: true, companyIdList: []};

我有2个JQuery函数，它们更改对象的某些值（很快实现了第三个）

$("[name='hasCapacity']").bootstrapSwitch().on('switchChange.bootstrapSwitch', function(event, state) {
    scope.timelineFilter.hasCapacity = state;
});

$("[name='activeOnly']").bootstrapSwitch().on('switchChange.bootstrapSwitch', function(event, state) {
    scope.timelineFilter.onlyActivated = state;
});

这些功能正常工作。 如果更改后记录了scope.timelineFilter ，则可以看到从true到false的更改（或者相反）

现在，我想在此对象每次更改时都调用后端。 所以我尝试实现这样的观察者：

scope.$watchCollection('timelineFilter', function() {
    console.log("Changed");
}, true);

我确实将第三个参数设置为true以进行参考检查。 问题是，仅在加载页面时才会触发此事件，但是在更改属性时，它将不再触发。

也尝试不使用第三个参数，使用带和不使用第三个参数的scope.$watch 。 结果相同。

我搜索了SO，大多数人都试图用对象观察数组，所以对我来说这是不可行的，因为后端需要一个对象。

我怎么解决这个问题？ JQuery中的问题吗？ 通过在JQuery方法中更改它，它是否不注册观察者？

谢谢！

Answer 1

您正在做的事情超出了angular的摘要周期。 您必须自己调用它：

$("[name='hasCapacity']").bootstrapSwitch().on('switchChange.bootstrapSwitch', function(event, state) {
    scope.timelineFilter.hasCapacity = state;
    scope.$digest();
});

$("[name='activeOnly']").bootstrapSwitch().on('switchChange.bootstrapSwitch', function(event, state) {
    scope.timelineFilter.onlyActivated = state;
    scope.$digest();
});