Question

即使我正在尝试更改传递的值，我m trying to accomplish: I have jQuery plugin that I want to wrap to be an angular directive. And to do this i need to pass params to it, and the plugin have it own onchange`也会在原始范围内反映出来。而且我得到了一些非常意外和奇怪的结果。这是小提琴：

http://jsfiddle.net/q1915b38/2/

在这里，我试图模拟我想要完成的最小例子。但正如你所看到的那样根本不起作用。原始控制器范围中的值不会更改。但在现实世界的例子中，它的行为有点不同。这里是小提琴2号。

http://jsfiddle.net/ne5hbgxp/

我从第一个改变的唯一一件事是来自模板的模板：

template: "<input type='text' id='blah' />",

到

template: "<input type='text' id='blah' ng-model='abc' />",

基本上我在模板中添加了ng-model属性，我根本不使用它。但它只是从完全不工作到使用故障。现在当第一次改变触发时没有任何反应。但是当它第二次触发时 - 来自先前变化的值被传递到原始范围。当我改变3时间值时 - 第二次的值转到控制器。等等。所以基本上它有一个延迟，退步一步为我不明原因。这是我在我的真实世界示例中所面临的确切行为，尽管根本没有ng-model并且所有内容都是通过jQuery插件生成的。

基本上我的问题如下：

1）为什么它不适用于第一个例子

2）为什么它在第二个例子中使用这种奇怪的行为并且一步延迟？这种行为的逻辑是什么？

3）解决这个问题的正确方法是什么？

Answer 1

由于您使用jQuery更新指令中的内容，因此需要调用$apply()来触发角度摘要周期

link: function(scope, iElement, iAttrs, controller) {
    $('#blah').change(function() {
        scope.value = $(this).val();
        scope.$apply();
    });
}

JSFiddle Link

然而，仔细观察这一点，是否有理由在此示例中更喜欢jQuery .change()？ Angular提供ngChange，这可能正是您正在寻找的，因为您可以通过明确调用摘要周期来减轻，因为我们在Angular世界中而不是与jQuery作斗争。一个例子可能包括......

<input type='text' id='blah' ng-model='abc' ng-change='update()'/>

scope.update = function() {
    scope.value = scope.abc;
}

<{> JSFiddle Link ng-change

Answer 2

问题非常简单...更改范围超出angular的核心指令的事件对于角度不可见，因此您需要通知angular执行摘要以便更新视图。

这是通过$apply()完成的，或者可以使用$timeout()来阻止在另一个摘要周期正在进行时调用$apply()

    link: function (scope, iElement, iAttrs, controller) {
        $('#blah').change(function () {
            var $el =$(this);
            scope.$apply(function () {
                scope.value = $el.val();
            })
        });
    }

我建议利用指令中公开的iElement。当jQuery包含在angular

之前的页面中时，这是一个jQuery对象

如何使用javascript事件

2 个答案: