Question

我正在尝试使用带有ng-repeat的angularjs创建一些自定义标记，但它不起作用，它的标记名称用双引号。

好结果是：不应该显示<div>或其他标签。

我在这里有一个演示版：http://plnkr.co/edit/aT2UjMIGGLvnCGFxXC3a?p=preview 或者您可以使用代码段

我的代码是：

＆＃13;

angular.module('myApp', [])
.controller('MainCtrl', function($scope) {
   $scope.items = [
	  {
	    "name":"directive1"
	  },
	  {
	    "name":"directive2"
	  },
	  {
	    "name":"div"
	  }
	];
})

.directive("showitems", function(){
	return {
		restrict: "E",
		template: '<div class="item" ng-repeat="item in items"><div class="item-title">{{item.name}}</div><div class="item-body"><{{item.name}}></{{item.name}}></div></div>'
	}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
  <showitems></showitems>
</div>

＆＃13;

Answer 1

AFAIK，像<{{item.name}}></{{item.name}}>这样的东西永远不会在角度上工作，因为标记不被视为新的DOM元素。一种更好，更易于管理的方法是为所有可能要呈现为DOM元素的types编写指令。

另外，要从指令中了解有关DOM操作的更多信息，请阅读$compile：here

在指令模板中执行此操作的另一种方法是：

<directive1 ng-if="directiveType == 'directive1'"></directive1>
<directive2 ng-if="directiveType == 'directive1'"></directive2>
<directive3 ng-if="directiveType == 'directive1'"></directive3>

在您的控制器/指令中，您必须将directiveType声明为您要呈现的指令类型。

Answer 2

不要将{{item.name}}包装到自己的标记中，而是创建customTag指令。这可以使用字符串（标记名称）并使用它创建和编译元素。

.directive("customTag", function ($compile) {
  return {
    restrict: "A",
    link: function (scope, element, attrs) {
      //pass customTag in as part of the directive attribute
      var customTag = attrs.customTag;
      if (!customTag) return;
      var customElem = angular.element("<" + customTag + "></" + customTag + ">");

      //replace your custom element directive with the compiled one
      element.replaceWith($compile(customElem)(scope));
    }
  }
}

然后在你的template.html中：

<div class="item" ng-repeat="item in items">
   <div class="item-title">{{item.name}}</div>
   <div class="item-body">
      <!-- This will use customTag directive to create element item.name -->
      <div data-custom-tag="{{item.name}}"></div>
   </div>
</div>

div标签（或任何非指令）不会太有用，因为它没有获得任何innerHTML或者行为，例如directive1和directive2会得到。这当然是一个简单的例子，你可能想在那里增加一些检查或限制，但这应该让你开始。

请参阅基于您的示例构建的小提琴here。

如何使用ng-repeat生成自定义html标签或指令？

2 个答案: