Question

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

Answer 1

我认为问题在于你正在编译text-form元素（由指令给出），但你将ng-change属性附加到.form-control元素（它甚至不是你的指令）。因此，angular不知道这一点，并且没有正确地整合ng-change。

我认为你应该在你想要控制的元素上使用这个指令，即：

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

并将指令限制为＆＃39; A＆＃39;或者＆＃39; AE＆＃39;

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

如何动态添加ng-change处理程序到输入

1 个答案: