如何在指令的链接函数中向元素对象添加AngularJS指令?

时间:2014-04-16 14:23:44

标签: angularjs angularjs-directive

我构建了两个自定义指令,datepicker和日期验证,并且我在获取datepicker以包含date-validation指令时遇到了麻烦。起初我将datepicker和日期验证指令作为......

controls.directive('dateValidation', ['$filter', function ($filter) {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs, ngModel) {  
            // validation methods here...
        }
    };
}]);

controls.directive('myDatepicker', [function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        replace: true,
        template: '<input type="text"  date-validation />',
        link: function (scope, element, attrs, ngModel) {
            // inject date picker here...
        }}
    };
}]);

这完美无缺,直到我在IE8中尝试过。在IE8中,指令用模板替换当前元素并引发错误的方式存在问题。

然后我尝试将replace替换为false并取走模板。然后添加&#34;日期验证&#34;使用jQuery属性并使用$ compile方法重新编译元素,如...

controls.directive('myDatepicker', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        require: 'ngModel',
        replace: false,
        link: function (scope, element, attrs, ngModel) {
            element.attr({ 'date-validation': '' });
            $compile(element)(scope);

            // inject date picker here...
        }}
    };
}]);

但这也没有奏效。

此外,使用该指令的HTML看起来像这样......

<input type="text" ng-model="startDate" my-datepicker />  

如果有人可以告诉我如何在自定义指令中包含另一个指令,我将非常感激。

0 个答案:

没有答案