Question

我正在创建一个基本上用作<input>但具有一些特殊功能的指令：

   app.directive('skInput', function(){
        return {
            restrict: 'A',
            replace:true,
            template: '<div style="display:inline-block">\
                        <span ng-show="disabled">{{model}}</span>\
                        <input ng-hide="disabled" placeholder="{{placeholder}}" type="text" class="sk-input" ng-model="model" stop-event ng-required="isRequired"/>\
                       </div>',
            require: ['ngModel'],
            scope:{
                'width':'@',
                disabled: '=ngDisabled',
                model: '=ngModel',
                placeholder: '@'
            },
            link: function(scope, elem, attrs){
                if(angular.isDefined(scope.width)){
                    elem.find('input').css('width', scope.width);
                }

                if(angular.isDefined(attrs.required)){
                    scope.isRequired = true;
                }else{
                    scope.isRequired = false;
                }
            }
        }
    });

问题在于我希望将此指令视为input，其中可能包含许多指令或HTML5属性，如placeholder，ng-pattern，required等在他们。但是，我必须连接指令＆＃39;像你看到的那样，手动赋予基础input属性。

有没有办法告诉Angular将指令的属性放在<input>元素而不是<div>元素上？这样我可以做<span sk-input ng-pattern="\regex\"></span>之类的事情，它会自动生成

<div>
    <span ng-show="disabled"></span>
    <input ng-pattern="\regex\" />
</div>

而不是

<div ng-pattern="\regex\">
    <span ng-show="disabled"></span>
    <input />
</div>

Answer 1

我认为你手动操作它，虽然可能有更简单的方法（你可能会看一下使用模板函数而不是字符串）。

角度如何使用replace合并属性：true是内部的，实际上是他们弃用的东西。 Here is a related question。

模板函数传递原始元素和属性。

template: function(elem, attr) {
    var input = angular.element('<div><input></input></div>');
    for(var a in attr) {
        //optional if statement for whitelist/blacklist, etc.
        input.children().attr(a, attr[a]);
    }
    return '<div style="display:inline-block">\
                <span ng-show="disabled">{{model}}</span>' +
                input.innerHTML +
           '</div>'
    //build up your template here 
}

这样做甚至可以让你在不使用隔离范围的情况下离开（这将使你的指令更符合其他ng-指令）。

传输自定义指令的简便方法＆＃39;属性到子元素？

1 个答案: