2

我创建了一个指令，应该向所有子输入标签动态添加一个 ng-change 指令：

myApp.directive('autosave', function ($compile) {
    return {
        compile: function compile(tElement, tAttrs) {

            return function postLink(scope, iElement, iAttrs) {

                var shouldRun = scope.$eval(iAttrs.autosave);

                if (shouldRun) {
                    iElement.find(':input[ng-model]').each(function () {
                        $(this).attr("ng-change", iAttrs.ngSubmit);
                    });
                    $compile(iElement.contents())(scope);
                    console.log("Done");
                }
            }; //end linking fn
        }
    };
});

我遇到的问题是 ng-change 指令没有运行。我可以看到它已添加到 DOM 元素中，但在值更改时未执行。

奇怪的是，如果我尝试使用 ng-click，它确实有效。

不知道这是 ng-change 的错误还是我做错了什么。

小提琴是用ng-click（点击输入）http://jsfiddle.net/dimirc/fq52V/

小提琴与 ng-change 一起使用（应该在更改时触发）http://jsfiddle.net/dimirc/6E3Sk/

顺便说一句，如果我将所有内容移至编译函数，我可以完成这项工作，但我需要能够评估指令的属性，并且我无法从 compile fn 访问指令。

谢谢

4

1 回答 1

1

你让你的生活比现在更艰难。你不需要做所有的 angular compile/eval/etc 的东西——最后 angular 是 javascript：在这里查看你修改过的（现在正在工作的）示例：

if (shouldRun) {
  iElement.find(':input[ng-model]').on( 'change', function () {
    this.form.submit();
  });
  console.log("Done");
}

http://jsfiddle.net/lgersman/WuW8B/1/

您的方法的一些注意事项：

  • ng-change 直接映射到 javascript 更改事件。因此，如果有人在 INPUT 元素上使用剪切/复制/粘贴，则永远不会调用您的提交处理程序。更好的解决方案是使用“输入”事件（捕获所有修改案例）。

  • 诸如更改/输入等原生事件将被冒泡到浏览器中的父 dom 元素。因此将更改侦听器附加到表单而不是每个输入将具有完全相同的效果。

  • 如果您想自动保存每次编辑，您将对提交处理程序进行大量调用。更好的方法是减慢/限制提交事件委托（参见http://orangevolt.blogspot.de/2013/08/debounced-throttled-model-updates-for.html）。

  • 如果您想自动保存每次编辑，您可以完全跳过更改处理程序的内容并简单地观察更改范围（这将在由编辑引起的角度模型更新期间发生），一切都会好起来的：

    scope.watch(function() { eElement[0].submit(); });

于 2013-08-16T10:13:24.253 回答