AngularJS 动态添加指令时未调用 $parser
AngularJS $parser not being called when dynamically adding the directive
所以我想要实现的是能够通过另一个指令添加一个包含解析器的指令。
当直接在 html 元素上添加解析器指令时,它完全可以正常工作。我目前使用的解析器指令:
.directive('parseTest', [
function () {
return {
restrict: 'A',
require: ['ngModel'],
link: {
post: function (scope, element, attributes, ctrls) {
var controller = ctrls[0];
controller.$parsers.unshift(function (value) {
var result = value.toLowerCase();
controller.$setViewValue(value);
controller.$render();
return result;
})
}
}
}
}
])
现在,当我通过另一个指令添加此指令时,解析器永远不会被足够奇怪地调用。生成parsetest指令的指令:
.directive('generateTest', ['$compile',
function ($compile) {
return {
restrict: 'A',
compile: function (elem, attrs) {
elem.attr('parse-test', '');
elem.removeAttr('generate-test');
var linkFn = $compile(elem);
return function (scope, element, attr) {
linkFn(scope);
}
}
}
}
])
以下工作正常:
<input class="form-control col-sm-6" ng-model="model.parsetest" parse-test/>
以下不起作用(虽然生成的结果html相同)
<input class="form-control col-sm-6" ng-model="model.generateTest" generate-test />
所以我的问题是如何让解析器在动态添加的指令中工作?
请注意,我已经尝试过 中类似问题的解决方案,但这对我不起作用。
编辑:Here is a plnkr that demonstrates the issue,这两个字段都应用了 parse-test 指令,应该使模型中的值小写,但它仅适用于未动态添加的字段,如控制台日志。
所以我找到了解决方案,对于在这里遇到同样问题的任何人来说,它就是。
必须对生成包含解析器或格式化程序的指令的指令进行 2 处小更改。
首先将指令的优先级设置为高于或等于 1 的数字。其次将终端设置为 true。这两个设置似乎可以解决问题。
问题可能在于嵌套指令的默认执行使得解析器和格式化程序插入的时间稍晚,这就是为什么我们需要确保首先生成指令。
这只是对它为何起作用的假设,如果其他人有解释那就太好了:)
至于代码,生成另一个指令的指令应该类似于:
directive('generateTest', ['$compile',
function ($compile) {
return {
restrict: 'A',
terminal: true,
priority: 1,
compile: function (elem, attrs) {
attrs.$set('parseTest', '');
attrs.$set('generateTest', undefined);
var linkFn = $compile(elem);
return function (scope, element, attr) {
linkFn(scope);
}
}
}
}
])
所以我想要实现的是能够通过另一个指令添加一个包含解析器的指令。 当直接在 html 元素上添加解析器指令时,它完全可以正常工作。我目前使用的解析器指令:
.directive('parseTest', [
function () {
return {
restrict: 'A',
require: ['ngModel'],
link: {
post: function (scope, element, attributes, ctrls) {
var controller = ctrls[0];
controller.$parsers.unshift(function (value) {
var result = value.toLowerCase();
controller.$setViewValue(value);
controller.$render();
return result;
})
}
}
}
}
])
现在,当我通过另一个指令添加此指令时,解析器永远不会被足够奇怪地调用。生成parsetest指令的指令:
.directive('generateTest', ['$compile',
function ($compile) {
return {
restrict: 'A',
compile: function (elem, attrs) {
elem.attr('parse-test', '');
elem.removeAttr('generate-test');
var linkFn = $compile(elem);
return function (scope, element, attr) {
linkFn(scope);
}
}
}
}
])
以下工作正常:
<input class="form-control col-sm-6" ng-model="model.parsetest" parse-test/>
以下不起作用(虽然生成的结果html相同)
<input class="form-control col-sm-6" ng-model="model.generateTest" generate-test />
所以我的问题是如何让解析器在动态添加的指令中工作?
请注意,我已经尝试过
编辑:Here is a plnkr that demonstrates the issue,这两个字段都应用了 parse-test 指令,应该使模型中的值小写,但它仅适用于未动态添加的字段,如控制台日志。
所以我找到了解决方案,对于在这里遇到同样问题的任何人来说,它就是。
必须对生成包含解析器或格式化程序的指令的指令进行 2 处小更改。 首先将指令的优先级设置为高于或等于 1 的数字。其次将终端设置为 true。这两个设置似乎可以解决问题。 问题可能在于嵌套指令的默认执行使得解析器和格式化程序插入的时间稍晚,这就是为什么我们需要确保首先生成指令。
这只是对它为何起作用的假设,如果其他人有解释那就太好了:)
至于代码,生成另一个指令的指令应该类似于:
directive('generateTest', ['$compile',
function ($compile) {
return {
restrict: 'A',
terminal: true,
priority: 1,
compile: function (elem, attrs) {
attrs.$set('parseTest', '');
attrs.$set('generateTest', undefined);
var linkFn = $compile(elem);
return function (scope, element, attr) {
linkFn(scope);
}
}
}
}
])