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。结果相同。

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

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

谢谢！

Answer 1

你正在做角度消化周期以外的事情。你必须自己调用它：

$("[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();
});

在AngularJS中观察对象

1 个答案: