AngularJS指令 - 使用ngModel和jQuery小部件時的最佳實踐

Question

這是我的問題。例如，我們有以下指令，它在後臺使用一些jQuery的插件：

module.directive('myWidget', [function() { 
    return { 
     require: "ngModel", 
     restrict: "A", 
     replace: true, 
     templateUrl: "templates/myWidget.html", 
     link: function(scope, element, attrs, ctrl) { 
      element.widget_name().on('value_updated', function(event) { 
       scope.$apply(function() { 
        var newModelValue = event.some_value; 
        ctrl.$setViewValue(newModelValue); 
       }); 
      }); 

      scope.$watch(attrs["ngModel"], function(value){ 
       element.widget_name('set_value', value); 
      }); 
     } 
    }; 
}]); 

所以，如果模型的價值變化，那麼這是使用$腕錶監聽模型改變註冊的處理程序將被執行，因此，小部件的'set_value'方法也將被執行。這意味着'value_updated'事件將被觸發。

我的問題是：什麼是實現指令的類似行爲，以避免DOM事件處理程序和觀察家的額外要求的最佳做法？

Answer 1

相反的scope.$watch()，我建議實施ctrl.$render()。只有在Angular內部改變模型時才應該調用$ render。 Fiddle example。

這解決了你沒有提到的一個問題。不幸的是，它不能解決你提到的問題。在小提琴中，綁定了一個blur事件，而不是一些widget.on（）事件。也許這對你的工作–即，只有模糊更新模型，而不是每個擊鍵（這假設你的小部件接受擊鍵，但是）。

也許你也可以問widget作者提供不觸發事件的「設置」方法。然後可以在$ render（）方法中使用它。