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
答案 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;
不确定,但我认为如果您的指令放在父级(例如表单元素)上也会有效。