11

这是我的问题。例如，我们有以下指令，它在幕后使用了一些 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);
            });
        }
    };
}]);

因此，如果模型的值发生变化，那么使用 $watch 注册的用于监听模型变化的处理程序将被执行，因此，小部件的 'set_value' 方法也将被执行。这意味着将触发“value_updated”事件。

我的问题是：在指令中实现类似行为以避免额外调用 DOM 事件处理程序和观察程序的最佳实践是什么？

4

1 回答 1

4

而不是scope.$watch()，我建议实施ctrl.$render()。$render 只有在 Angular 内部的某些东西改变了模型时才应该被调用。 小提琴示例。

这解决了一个你没有提到的问题。不幸的是，它并没有解决您提到的问题。在小提琴中，blur绑定了一个事件，而不是一些 widget.on() 事件。也许这对你有用——即，只在模糊时更新模型，而不是每次击键（这假设你的小部件正在接受击键）。

也许您还可以要求小部件作者提供不触发事件的“设置”方法。然后可以在 $render() 方法中使用它。

于 2013-03-13T19:44:10.713 回答