$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

我想通了。这是因为在我的控制器中，我正在通过这样做来填充 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);

这行得通。