型號

Question

我有打印一個簡單的消息templateUrl一個簡單的自定義指令myElement：

<p>Message: {{message}}</p> 

這裏是我的指令的定義：

testapp.directive('myElement', function() { 
    return { 
     restrict: 'E', 
     template: '<p>Message: {{message}}</p>', 
     link: function(scope, elem, attrs) { 
      scope.message = 'This message is never updated... :('; 
      setTimeout(function() { 
       scope.message = "Why this message is never shown?"; 
      }, 1000); 
     } 
    }; 
}); 

1秒後，我希望將消息更新爲「爲什麼此消息從未顯示？」。不幸的是，該消息從不更新。

這裏是的jsfiddle：http://jsfiddle.net/seyz/SNMfc

你能解釋一下我爲什麼？

Answer 1

您將需要使用scope.$apply();

setTimeout(function() { 
    scope.message = "Why this message is never shown?"; 
    scope.$apply(); 
}, 1000); 

從​​：

$適用（）用於從 角框架之外的角度來執行的表達式。 （例如，來自瀏覽器DOM事件， setTimeout，XHR或第三方庫）。

Answer 2

由於如何角髒檢查工作，當你的角度範圍之外執行代碼（例如，使用的setTimeout，setInterval的，或者從一些第三方插件回調中）的代碼調用產生的變化也不會'立刻'通過角度範圍'認可'。

對於這樣的場景，您需要將代碼包裝在scope.$apply()方法中。

在這種特殊情況下，你可以簡單地使用$timeout function與$timeout(fn, 1000)更換您的通話setTimeout(fn, 1000)和你的代碼將與範圍包裹。$適用（）調用（Plunker）。