雙向數據綁定不工作的指令

Question

我有一個指令，我想變化NG-模型值這項指令給... 我設置scope: {ngModel: '='}，我改變ngModel值（上點擊事件）在我的指令，但我看不到我的外部/原始對象的變化。

這plunker說明了什麼問題？

Answer 1

有幾件事錯在這裏，所有的人常犯的錯誤。

1. 使用$(...).on(...)通過jQuery的註冊事件處理程序將角背景之外執行，因此，當角的東西已經更新不會知道。爲了解決這個問題，必須將這些內容包裝在scope.$apply呼叫，像這樣

   $('#aaa').on('click', function() { 
       _scope.$apply(function(){ 
        _scope.ngModel = 'Other Value'; 
        updateTemplate(); 
       }); 
   }); 
   

   這將更新綁定到輸入與ng-model。事實上，你可以避免使用ng-click指令來做到這一點。

2. 使用angular，您無需使用.html(...)自行更新這種模板。綁定是框架的主要功能之一。您可以通過在{{ ... }}中放置一個表達式來使用插值，而您的模型所在的DOM將會更新。例如定義指令時，你可以使用

   template: '<div id="aaa">{{ngModel}}</div>' 
   

   設置你的模板，{{ngModel}}將顯示ngModel當前值。

3. ngModel不只是任何屬性，它是一個強大的指令。如果您需要自己的指令來聲明當前的模型有效或無效，或者與表單交互，則應該通過控制器上的require屬性（請參閱here）使用該指令。

   如果您不需要這些功能，那麼您應該調用屬性以避免衝突。

我已更新plunker以包含這些要點。