指令中的编译函数不能正确求值
compile function in directive not evaluating correctly
我有一个名为validate的指令,它跨包了一个表单,并根据内置的angular输入验证指令自动验证表单。该指令的部分工作是循环遍历表单上的子输入,并为数据验证添加适当的工具提示。这发生在指令的编译部分。问题是,我在编译函数中设置的数据绑定在html中不计算。例如
app.directive('validate', ["$timeout", "$compile", "gsap", function ($timeout, $compile, gsap) {
return {
scope: {
name: "@"
},
restrict: 'E',
replace: true,
controller: function ($scope) {
$scope.validate = {};
},
template: '<form name="{{name}}" ng-transclude></form>',
transclude: true,
compile: function compile(element, attr) {
//wrap this in a timeout function and wait for children to be available
//Have also tried this in the postLink function to the same result
$timeout(function () {
var selective = element.find('.validate');
if (selective.length > 0) {
$.each(selective, function (k, v) {
v.attr({
"tooltip": '{{validate.' + $(v).attr("name") + '}}',
"tooltip-trigger": '{{{true: "invalid", false: "valid"}[{{name}}.' + $(v).attr("name") + '.$invalid]}}'
});
});
} else {
$.each(element.find('input'), function (k, v) {
$(v).attr({
"tooltip": '{{validate.' + $(v).attr("name") + '}}',
"tooltip-trigger": '{{{true: "invalid", false: "valid"}[{{name}}.' + $(v).attr("name") + '.$invalid]}}'
});
});
}
});
return {
post: function postLink(scope, elem, attr, controller) {
//...a whole bunch of validation code, all works fine...
//should compile with attributes and resolved databindings
$compile(scope, elem, attr, controller);
}
};
}
};
}]);
在我的DOM
中求值如下<input ng-model="username" type="email" placeholder="Username" name="username" ng-required="true" ng-minlength="2" class="ng-pristine ng-invalid ng-invalid-required ng-valid-email ng-valid-minlength" required="required" tooltip="{{validate.username}}" tooltip-trigger="{{{true: "invalid", false: "valid"}[{{name}}.username.$invalid]}}">
正如您所看到的,属性已经设置,但是数据绑定并没有像我期望的那样求值
修复。对于任何好奇的人来说,编译函数的语法是$compile(elem)(scope)
,我忘记了编译的作用域。
相关文章:
- jQuery函数不能只在一个页面上工作
- jQuery dosn'内联函数不能按预期工作
- Javascript不能在一个命令中使用函数参数
- 变量只能在函数中局部工作,不能全局工作-Javascript
- jQuery$.post可以在chrome、safari中工作,但不能在FF中工作(声明成功回调函数未定义)
- 可以'不能间接执行JQuery函数
- 反向名称的JavaScript函数不能正确工作(例如学习JavaScript-O'Reilly)
- jQuery/Javascript函数可以在Chrome中使用,但不能在IE11中使用
- 两个独立工作的javascript函数,但不能一起工作
- 为什么我不能在 node.js(浏览器化)的 require() 函数中使用变量作为参数
- Array.from 在 Array#map 中不能用作直接回调函数
- RGB 到 HEX JavaScript 函数在 Chrome 中工作,但不能在 Firefox 或 Safari 中工
- 可以获取模板实例值,但不能将其用于其他函数
- 不能将类作为函数调用
- Caret函数没有'如果插入符号在最后一个位置,就不能正常工作
- 为什么更改范围获胜'不能在ng if内部工作,而是通过函数调用AngularJS
- 表单提交onChange事件;不能使用JQuery函数
- jQuery函数不能从父级继承
- 为什么可以在内部函数成员中访问对象引用,而不能在内部属性成员中访问
- 为什么我不能重新定义函数'它的原型来自内部