javascript - 如何使用javascript事件从angularjs指令范围传回值

Question

我试图完成的事情:我有一个 jQuery 插件，我想将其包装成一个 Angular Directive(指令)。为此，我需要将参数传递给它，并且插件拥有自己的onchange`，即使在我试图更改传递的值的地方，它也会反射(reflect)在原始范围中。我得到了一些非常出乎意料和奇怪的结果。这是第一 fiddle :

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

在这里，我尝试模拟我想要完成的最小示例。但是正如您所见，它根本不起作用。原始 Controller 范围内的值不会改变。但在现实世界的例子中，它的行为有点不同。这是 2 号 fiddle 。

http://jsfiddle.net/ne5hbgxp/

与第一个相比，我唯一改变的是模板中的模板:

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

到

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

基本上我在模板中添加了一个 ng-model 属性，我根本没有在任何地方使用它。但它只是从完全不工作到处理故障。现在，当第一次触发更改时，什么也没有发生。但是当它第二次触发时 - 先前更改的值被传递到原始范围。当我更改 3 时间值时 - 第二次的值会转到 Controller 。等等。所以基本上它有一个后退一步的延迟，因为我不知道原因。这正是我在现实世界示例中遇到的确切行为，尽管根本没有 ng-model 并且所有内容都是通过 jQuery 插件生成的。

所以基本上我的问题如下:

1) 为什么它在第一个例子中不起作用

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

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

Answer 1

由于您使用 jQuery 来更新指令中的某些内容，因此需要调用 $apply() 来触发 Angular 摘要循环

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