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

时间:2017-02-27 07:05:41

标签: javascript angularjs

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

1 个答案:

答案 0 :(得分:0)

我认为问题在于你正在编译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;

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