在$ scope上定义的对象变为未定义

Question

在我的指令控制器中，我有一个像这样的$ watch：

$scope.$watch(function () {
    return service.abc;
}, function(newVal, oldVal) {
  $scope.abc = {abc: newVal};
});

我注意到在其他控制器中使用时，我遇到了这个变量未定义的问题。我设置了另一只手表：

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

使用这个监视器，我看到abc对象是用服务中的值定义的，但后来变得未定义。我确信我不是在任何地方修改这个对象。即使我设置

$scope.abc = {abc: angular.copy(newVal)}; 

为了确保对象不被修改，它仍然是未定义的。我已经尝试使用vm controllerAs语法并尝试使用不同的变量名来确保它没有被修改，但它仍然是未定义的。这是怎么回事？我需要将此对象传递给指令，并能够从此父控制器修改它并让内部指令控制器反映更改。

Answer 1

首先，每次启动控制器或指令时，控制器或指令中的范围变量都需要初始化。

看起来你想要使用在服务中设置的变量，这应该没问题，因为它们是单例，并且在应用程序的生命周期中，值将在页面之间持续存在。

该手表旨在监视控制器和指令中的范围变量，以便您在使用时使用：

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

您正在看控制器/指令中名为abc的范围变量。如果你没有在你的控制器/指令中初始化abc，那么这个手表永远不会被解雇。

另外，请确保使用此语法在控制器/指令中定义监视：

$scope.$on('$destroy', $scope.$watch('abc', function (newVal, oldVal) {
    if (newVal != oldVal) {
      // do something here
    }
}));

如果您要进入页面，退出并重新进入页面，此定义会阻止手表多次运行。手表被多次定义，但没有被销毁。