Question

我创建了一个指令，它应该动态地将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/

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

谢谢

Answer 1

你的生活比现在更艰难。你不需要做所有的角度编译/评估/等东西 - 最后的角度是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 map直接映射到javascript change事件。因此，如果某人在INPUT元素上使用剪切/复制/粘贴，则永远不会调用您的提交处理程序。更好的解决方案是使用“输入”事件（捕获所有修改案例）。
更改/输入等本机事件将被冒泡到浏览器中的父dom元素。所以将更改侦听器附加到表单而不是每个输入都是完全相同的。
如果您想自动保存每个编辑，您将对提交处理程序进行令人难以置信的大量调用。更好的方法是减慢/限制提交事件委派（参见http://orangevolt.blogspot.de/2013/08/debounced-throttled-model-updates-for.html）。
如果您想自动保存每个编辑，您可以完全跳过更改处理程序的内容，并且只需观察更改的范围（这将在编辑引起的角度模型更新期间发生）并且一切都会正常：

scope.watch（function（）{ eElement [0] .submit（）; }）;

从指令的链接函数添加对子元素的ng-change

1 个答案: