試圖從指令中的內部示波器觀察外部示波器不工作

Question

我在觀察指令中的示波器變量時遇到了一些困難。

我有一個範圍可變稱爲VAL控制器：

$scope.val = { name: "hello" }; 

我有一個使用該值的指令。因此，在此控制器的觀點我沿着線的東西：

<custom-component custom-attribute="val"></custom-component> 

我已經建立了具有範圍的精細

var myDir = function() { 
    return { 
     restrict: 'E', 
     scope: { 
      customAttribute: '=customAttribute' 
     }, 
     link: function(scope, elem, attr) { 
      scope.$watch('customAttribute', function(val){ console.log(val); } 
     }, 
     replace: true, 
     template:'<div class="hello"></div>' 
    }; 
} 

手錶功能火災時，我第一次運行一個指令應用程序。現在我在我的控制器中放了一個暫停，並執行如下操作：

setTimeout(function(){ 
     console.log("Changed chart type name"); 
     $scope.customAttribute.name="baz"; 
    },5000); 

這不會導致監視功能觸發！我不確定問題是什麼。我也試圖把超時的情況下，指令鏈接功能中有一些對象拷貝問題（下面範圍$表。）：

link: function(scope, elem, attr) { 
     scope.$watch('customAttribute', function(val){ console.log(val); } 
     setTimeout(function(){ 
      console.log("Changed chart type name"); 
      scope.customAttribute.name="baz"; 
     },5000); 
    }, 

這仍然沒有工作！

編輯：

所以，我已經發現，如果在我的控制器我調用$範圍$摘要（）更新變量一切正常後。爲什麼我需要手動調用此函數？

Answer 1

由於您使用的setTimeout被稱爲角上下文之外，所以你必須調用範圍。$應用，有兩種方法可以解決你的問題

1）使用scope.$apply()

link: function(scope, elem, attr) { 
    scope.$watch('customAttribute', function(val){ console.log(val); } 
    setTimeout(function(){ 
     console.log("Changed chart type name"); 
     scope.customAttribute.name="baz"; 
     scope.$apply(); 
    },5000); 
}, 

2 ）裹在角$timeout

link: function(scope, elem, attr) { 
    scope.$watch('customAttribute', function(val){ console.log(val); } 
    $timeout(function(){ 
     console.log("Changed chart type name"); 
     scope.customAttribute.name="baz"; 
    },5000); 
}, 

Answer 2

代替setTimeout的功能，使用$timeout，這是AngularJS的等價物。它使用$ scope。$內部應用。有了setTimeout，事情就發生在「角度世界」之外，你的應用程序不知道它們。

不要忘記注入$timeout到控制器中：下面

.controller('MyCtrl', ['$timeout', function($timeout) { 
... 

}]);