Question

我有

<tag zn="abcd" ></tag>

我需要得到

<input type="text" value="{{value}}" ></input>

但我得到了不必要的属性'zn'

<input type="text" value="abcd" zn="abcd" ></input>

我不需要属性'zn'

AND MAIN：

此标记有效

<tag zn="abcd" ></tag>

但它不起作用

<tag zn="abcd" />

必须是单个标签。我只得到第一个元素。

plunker

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Calendar</title>
</head>

<body>
    <div ng-app="dir" >
        <tag zn="abcd" >1 </tag><br>
        <tag zn="bcde" >2 </tag><br>
        <tag zn="cdef" >3 </tag><br>
        <tag zn="" >4 </tag><br>
    </div>


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>
var myapp = angular.module("dir", []);

myapp.directive('tag', function(){
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      scope: {
        value: '@zn'
      },
      template: '<input type="text" value="{{value}}" ></input>', 

    };
});
</script>
</body>
</html>

由于

Answer 1

您必须手动删除该属性：

myapp.directive('tag', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      value: '@zn'
    },
    template: '<input type="text" value="{{value}}" ></input>',
    link: function(scope, element) {
      element.removeAttr('zn');
    }
  };
});

演示： http://plnkr.co/edit/0BHfyJiOx6q0rxQF3uCZ?p=preview

不要使用自动关闭标签，因为它们可能无法正常工作。如果它们正确渲染，则取决于浏览器的解析器，而不是AngularJS。

始终使用<tag zn="abcd" ></tag>代替<tag zn="abcd" />。

虽然<tag />在 HTML5 中有效，但在 XHTML 中表示<tag>而不是<tag></tag>。

Angular和Single标签以及不必要的属性

1 个答案: