AngularJS 双向绑定指令 $scope.$watch 不起作用

Question

我正在尝试检测 AngularJS (1.7.2) 指令中双向绑定范围的变化。

// pagination.js (directive)
app.directive("pagination", ($rootScope) => {
  return {
    templateUrl: "/shared/filters/pagination/pagination.html",
    scope: {
      filter: "="
    },
    link: function($scope, element, attrs) {

      $scope.$watch("filter", value => {
        console.log(value); // first time works, later it's undefined
      });

    }
  }
});

// parent.html 
<pagination filter="filter"></pagination>

// parent.js 
$scope.filter = {
  status: "All"
};

$scope.filter 正在通过函数进行更改，该函数也位于 parent.js 文件中：

$scope.someFunction = () => {
  $scope.filter.status = "Pending";
  // this should fire the $scope.$watch event in the pagination.js (directive)
  // however this doesn't get applied
};

如何让作用域监听来自其他指令的变化？

Answer 1

使用更深的观察深度：

  $scope.$watch("filter", value => {
      console.log(value); // first time works, later it's undefined
  ̶}̶)̶;̶̶
  }, true);

有关信息，请参阅 AngularJS Developer Guide - $scope Watch Depths。

AngularJS 双向绑定指令 $scope.$watch 不起作用

AngularJS directive $scope.$watch for two way binding doesn't working

angularjs

angularjs-directive

angularjs-scope