如何将ng-change处理程序动态添加到输入[重复]答案

【问题标题】：how to add ng-change handler dynamically to input [duplicate]如何将ng-change处理程序动态添加到输入[重复]
【发布时间】：2017-02-27 07:05:41
【问题描述】：

app.directive('textForm', function ($compile) {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: "textForm.html",
        scope: {
            label: "@",
            model: "=",
            type: "@",
            name: "@",
        },
        link: function (scope, element) {
            scope.log = function () {
                console.log(1);
            };

            var input = element.find('.form-control');
            input.attr({'ng-change': 'log()'});
            $compile(element.contents())(scope);
        }
    }
});

<!-- this is textForm.html -->
<div class="form-group">
    <label class="col-xs-3 control-label">{{label}}</label>
    <div class="col-xs-7">
        <input type="{{type||'text'}}" name="{{name}}" class="form-control" ng-model="model">
    </div>
</div>

<!-- this is how I use the directive -->
<text-form label="name" name="name" model="person.name"></text-form>

上面的代码无法运行，但可以说明问题。

出于某种原因，我想动态地将ng-change 添加到input，经过一番搜索，我发现$compile 可以做到这一点。但它似乎不起作用，我不知道为什么。

我的角度版本是 1.5.5

【问题讨论】：

您在 HTML 中将directive 引用到哪里？
这样做的用例是什么？
@troy 你要在ng-change 中动态添加什么并基于什么？？
@georgeawg 实际上我想添加 ng-pattern、ng-max、ng-min 等进行输入验证，但有些输入需要这些，有些则不需要。为了使这个指令更可定制，我需要动态添加一些属性。 ng-change 只是一个例子
@troy 看看this answer，我正在向 DOM 添加动态属性..

标签： javascript angularjs

【解决方案1】：

我认为问题在于您正在编译 text-form 元素（由指令给出），但您将 ng-change 属性附加到 .form-control 元素（甚至不是指令的子元素）。所以 Angular 没有意识到这一点，也没有正确整合 ng-change。

我认为您应该在要以这种方式控制的元素上使用此指令，即：

<input text-form type="{{type||'text'}}" name="{{name}}" class="form-control" ng-model="model">

并使指令限制为“A”或“AE”

不确定，但我认为如果您的指令放在父级（例如表单元素）上也会起作用。

【讨论】：

有意义，但我正在尝试制作一个引导内联表单，所以我无法更改 dom 结构
hmm... 但是你并没有改变 dom 结构，你只需要在调用 compile 时将指令放在正确的元素上
类似$compile(input)(scope); 的东西？它不起作用。我使用 Pankaj Parkar 的方法解决了我的问题