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);
            });
        }
    };
}]);

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

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

Answer 1

我建议实施scope.$watch()，而不是ctrl.$render()。只有在Angular中的某些内容更改模型时才应调用$ render。 Fiddle example

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

也许你也可以要求小部件作者提供一个不会触发事件的“set”方法。然后可以在$ render（）方法中使用它。

AngularJS指令 - 将ngModel与jQuery小部件一起使用时的最佳实践

1 个答案: