angularjs – 使用指令添加ngModel进行输入

发布时间：2020-12-17 09:29:55 所属栏目：安全来源：网络整理

导读：我有一个输入元素,我想使用一个自定义指令绑定一个ngModel和一个ngClass,但我有一些麻烦. 我拥有的： input type="text" myDirective="PropertyFromScope" / 我想要的结果是： input type="text" ng-model="PropertyFromScope" ng-class="{'class' : MethodF

我有一个输入元素,我想使用一个自定义指令绑定一个ngModel和一个ngClass,但我有一些麻烦.

我拥有的：

<input type="text" myDirective="PropertyFromScope" />

我想要的结果是：

<input type="text" ng-model="PropertyFromScope" ng-class="{'class' : MethodFromScope}" />

我试图避免使用模板,因为我希望指令能够处理任何输入标签.

这是我到目前为止

angular.module('customDirectives',[])
.directive('myDirective',function () {
    var linker = function (scope,element,attrs) {
        attrs.$set('ngModel',attrs.myDirective);
        attrs.$set('ngClass','{'class' : MethodFromScope}');
    }
    return {
        restrict: 'A',link: linker
    }
});

这是一个JSFiddle：http://jsfiddle.net/Q8QJJ/

你试图完成这个吗？

很简单的解决方案：

myApp.directive('myDirective',function ($compile) {
    return {
        restrict: 'A',compile: function(element,attrs) {
            element.attr('ng-model',attrs.myDirective);
            element.removeAttr("my-directive");
            element.attr('ng-class','{'class' : testFunction()}');
            return {
               pre: function preLink(scope,iElement,iAttrs,controller) { },post: function postLink(scope,controller) { 
                 $compile(iElement)(scope);
               }
            }
        }
    }
});

这是一个小提琴http://jsfiddle.net/V9e9M/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!