Question

你好，我是AngularJS的新手

我对$ scope。$ watch方法有疑问。

我有三个控制器。一个名为＆＃34; ParentCtrl＆＃34;其他人是＆＃34; FirstChildCtrl＆＃34;和＆＃34; SecondChildCtrl＆＃34;。 ParentCtrl的范围有一个名为＆＃34; parentVal＆＃34;的属性。由FirstChildCtrl的范围观察者。

当我改变了＃34; parentVal＆＃34;在ParentCtrl的范围内，调用了FirstChildCtrl范围内的监听器。但当＆＃34; parentVal＆＃34;由SecondChildCtrl的范围改变，听众无法被调用。

他们之间有什么区别，以及如何通过SecondChildCtrl的范围在FirstChildCtrl的范围内调用监听监听器。

我尝试的代码是在Plunker中 Pluker的链接在下面 https://plnkr.co/nTxxlUEniUWKgO5IKVAo?p=info

HTML

<head>
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="angularScript.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-controller="parentCtrl">
  <div ng-controller="firstChildCtrl"></div>
  <div ng-controller="secondChildCtrl"></div>
</body>

的Javascript

var app = angular.module('WatchTest', []);
app.controller('parentCtrl', ['$scope', '$interval', 
  function($scope, $interval) {
    $scope.parentVal = 0;

    $scope.$watch('parentVal', function() {
      console.log('parentVal has changed!!!, A message from parentCtrl');
    });
  }
]);

app.controller('firstChildCtrl', [ '$scope', '$interval',
  function($scope, $interval) {
    $scope.$watch('parentVal', function() {
      console.log('parentVal has changed!!!, A message from firstChildCtrl');
    });
  }
]);

app.controller('secondChildCtrl', [ '$scope', '$interval',
  function($scope, $interval) {
    $interval(
      function() {
        $scope.parentVal++;
      }, 1000
    );
  }
])

Answer 1

使用ng-controller嵌套控制器会产生正常的原型继承。

这意味着firstChildCtrl，secondChildCtrl可以通过parentVal继承访问prototypal。在parentVal中增加/更改secondChildCtrl的那一刻，它将创建自己的parentVal属性，并将新值分配给该属性，以及将来引用parentVal的任何内容它自己的财产，而不是上升原型链。

如果您在父控制器中使用对象并更新其属性，结果将是您所期望的。

e.g。假设对象是数据。然后代码看起来像这样

app.controller('parentCtrl', ['$scope', '$interval', 
  function($scope, $interval) {
    $scope.data = {};
    $scope.data.parentVal = 0;

    $scope.$watch('data.parentVal', function() {
      console.log('parentVal has changed!!!, A message from parentCtrl');
    });
  }
]);

app.controller('firstChildCtrl', [ '$scope', '$interval',
  function($scope, $interval) {
    $scope.$watch('data.parentVal', function() {
      console.log('parentVal has changed!!!, A message from firstChildCtrl');
    });
  }
]);

app.controller('secondChildCtrl', [ '$scope', '$interval',
  function($scope, $interval) {
    $interval(
      function() {
        $scope.data.parentVal++;
      }, 1000
    );
  }
])

使用此代码，当secondChildCtrl

中的值更新时，您会看到观察者开火

有关详细信息，请参阅this。

当其他子控制器

1 个答案: