Question

我已经看过其他有问题的问题了，但是他们通常会有一些独特的复杂问题，答案似乎与所需结果的简单性成比例地复杂得多。我想问一下这个问题最简单的版本。

我们说我的指令看起来像这样：

<my-input type="text" placeholder="foo">

我希望输出看起来像这样：

<input type="text" placeholder="foo" class="bar">

我想要做的就是输出一个新元素并添加一些新属性，但保留原始元素的属性。如何实现这一目标？

Answer 1

据我所知，没有直接的方法可以将所有属性从一个元素复制到另一个元素，因此您需要循环浏览或知道您想要支持的属性。

以下是指令的开头，该指令将使用不同的元素替换具有指令的元素（在这种情况下为输入）

.directive('myInput', function() {
    return {
        replace: true,
        template: function(element, attrs) {
            var inputElem = angular.element('input');

            // Copy attributes from element to inputElem;
            angular.forEach(element[0].attributes, function(attr) {
                inputElem[0].setAttribute(attr.name, attr.value);
            })

            // Add new attributes

            return inputElem;
        }
    }
})

Answer 2

您的指令模板函数将允许访问您在元素上定义的所有属性。您可以在html元素中轻松添加这些属性。

<强>指令

app.directive('myInput', function(){
  return {
    restrict: 'E',
    template: function(element, attrs){
       var template = '<input type="'+ attrs.text +'"/>'
       //add other attributes from here
       return template;
    }
  }
});

Answer 3

使用指令的属性而不是元素：

<input type="text" placeholder="foo" my-directive>

并使myDirective将所需的新属性添加到其元素中。

创建保持原始元素属性的Angular指令

3 个答案: