Javascript 从ng消息中提取ng消息密钥
我需要创建一个指令myDirective,它读取其中的所有ng消息键,并且它仍然创建一个有效的ng消息元素: 指令模板:Javascript 从ng消息中提取ng消息密钥,javascript,angularjs,compilation,transclusion,Javascript,Angularjs,Compilation,Transclusion,我需要创建一个指令myDirective,它读取其中的所有ng消息键,并且它仍然创建一个有效的ng消息元素: 指令模板: <div id="myDirective"> <div ng-messages="myform.$error" ng-transclude></div> </div> 用法: <my-directive> <div ng-message="required">something is req
<div id="myDirective">
<div ng-messages="myform.$error" ng-transclude></div>
</div>
用法:
<my-directive>
<div ng-message="required">something is required</div>
<div ng-message="custom">custom validation</div>
</my-directive>
需要做点什么
自定义验证
所以在本例中,我希望得到一个“required”和“custom”数组。问题是我不能这样做,因为当我的指令进入它自己的链接函数时,所有ng Message元素都已经隐藏(更准确地说是从DOM中删除)。如何避免这种情况?在编译阶段删除指令的内容,因为您的指令具有
transclude:true
(我假设是这样,因为您使用的是ng transclude
)
在这种情况下,可通过传入的transclude
功能获取内容(这实际上是ng transclude
在封面下使用的内容)
transclude
功能是link
(或pre-link)功能的第五个参数:
link: function(scope, element, attrs, ctrls, transclude){
var transcludedContents; // jqLite of the contents
transclude(function(clone){
transcludedContents = clone;
});
// do whatever you do to extract ng-message values from transcludedContents
// just remember, that it could also come in the form:
// <ng-message when="required"> and
// <div ng-message-exp="errorMessage.type">
}
.directive("myDirective", function() {
return {
transclude: true,
templateUrl: "myDirective.template.html",
controller: function() {
var messages = [];
this.registerNgMessage = function(val) {
messages.push(val);
};
}
};
})
.directive("ngMessage", complementaryNgMessageDirective)
.directive("ngMessageExp", complementaryNgMessageDirective);
function complementaryNgMessageDirective() {
return {
priority: 10, // must be higher than ngMessage, because ngMessage is terminal
require: "^?myDirective", // must be optional not to break existing code
link: function(scope, element, attrs, myDirectiveCtrl) {
if (!myDirectiveCtrl) return; // do nothing, if not paired with myDirective
var staticExp = attrs.ngMessage || attrs.when;
var dynamicExp = attrs.ngMessageExp || attrs.whenExp;
var val;
if (dynamicExp) {
val = scope.$eval(dynamicExp);
} else {
val = staticExp;
}
myDirectiveCtrl.registerNgMessage(val);
}
};
}