angularjs - $watch 指令内部不工作

Question

我有一个看起来像这样的指令(省略了不相关的部分):

app.directive('rgReportContainer', function() {
  return {
    restrict: 'E',
    scope: {
      projectIds: '='
    },
    controller: controller
  };

  controller.$inject = ['$scope'];

  function controller($scope) {
    $scope.$watch('projectIds', function(projectIds) {
      console.log(projectIds);
    });
  }
});

projectIds 的值以 [] 开头，因此记录的第一件事是 []，正如我所料。

令人困惑的是 projectIds 在片刻之后被 XHR 请求填充，但该值从未被提取。

我的模板看起来像这样:

{{ reports.included_project_ids }}
<rg-report-container project-ids="reports.included_project_ids"></rg-report-container>

我可以在模板中看到 reports.included_project_ids 从空变为非空。有一点我可以清楚地看到 reports.included_project_ids 有数据，但在那一点上，我的 $scope.$watch 没有获取新值。

非常感谢任何帮助。

Answer 1

我想通了。这是因为在我的 Controller 中，我通过执行填充 reports.included_project_ids

reports.included_project_ids.push(project.id);

显然 push 不会触发 $watch。

一旦我将其切换为如下所示，它就起作用了。

var projectIds = [];
projectIds.push(project.id);
reports.included_project_ids = projectIds;

编辑:我意识到我的问题是由于 $watch 默认情况下不会“深入”检查相等性/不等性。为了让 $watch 对数组正常工作，您必须将 true 作为第三个参数传递给 $watch。

这是 $watch 的函数签名形式 docs :

$watch(watchExpression, listener, [objectEquality]);

所以我决定保留原来的 push 代码并将我的 $watch 更改为:

$scope.$watch('projectIds', function(projectIds) {
  console.log(projectIds);
}, true);

有效。