Question

考虑这个例子：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.js"></script>
<script>
angular.module('app', [])
</script>
<div ng-app='app'>

<div ng-init="tags  = ['i', 'b', 't']">
<div ng-repeat = 't in tags'>{{t}}</div>

</div>
</div>

Demo

这是假设的，但是我希望能够指定元素或属性。

<div ng-init="tags  = ['i', 'b', 't']">
<{{t}} ng-repeat = 't in tags'>{{t}}</{{t}}>

这不起作用：Demo

我该怎么做？我基本上想从json构建一个html结构（带有我自己的指令）。这样做是好还是坏的最佳做法？

Answer 1

您可以使用带有自定义转换功能的指令来实现此目的：

.directive('bindTagName', ['$compile', function ($compile) {
    return {
        transclude: true,
        replace: true,
        link: function (scope, elem, attrs, controller, transcludeFn) {
            // get tag name
            var tagName = scope.$eval(attrs.bindTagName);

            // create new tag
            var created = angular.element(document.createElement(tagName));

            // replace current element with created tag
            elem.replaceWith(created);

            // call transclude function
            transcludeFn(
                function (clone, scope) {
                    $compile(created.append(clone))(scope);
                }
            );
        }
    }
}])

鉴于以下观点：

<div ng-init="tags  = ['i', 'b', 't']">
    <div ng-repeat = 't in tags' bind-tag-name="t">-&gt; {{t}}</div>
</div>

它将产生以下html：

<div ng-init="tags  = ['i', 'b', 't']">
    <!-- ngRepeat: t in tags -->
    <i><span class="ng-binding ng-scope">-&gt; i</span></i>
    <!-- end ngRepeat: t in tags -->
    <b><span class="ng-binding ng-scope">-&gt; b</span></b>
    <!-- end ngRepeat: t in tags -->
    <t><span class="ng-binding ng-scope">-&gt; t</span></t>
    <!-- end ngRepeat: t in tags -->
</div>

Answer 2

我不知道你是否可以用angular操纵HTML标签。但是我可以想到一些可行的方法：

<div ng-app="app" ng-controller="appController">
    <div ng-init="tags = ['i', 'b', 't']">
        <i ng-show="t == 'i'" ng-repeat ="t in tags">{{t}}</i>
        <br/>
        <b ng-show="t == 'b'" ng-repeat ="t in tags">{{t}}</b>
        <br/>
        <t ng-show="t == 't'" ng-repeat ="t in tags">{{t}}</t>
        <br/>
    </div>
</div>

我不确定这会解决你的问题。对于您想要使用的每个标记，您必须编写该标记，并根据输入显示或隐藏它。

JSFiddle中的示例。

Answer 3

您可以执行以下操作：

<div ng-init="tags = ['span', 'span', 'div']">
   <span ng-repeat="t in tags track by $index" 
         ng-bind-html="'<' + t + '>' + t + '</' + t + '>'">
   </span>
</div>

但是，这会添加一个包裹<span>元素。

编辑：这需要添加对angular-sanitize.js的引用并向您的应用添加模块依赖项，以便它自动清理不安全的HTML：

angular.module("myApp", ["ngSanitize"])

在ng-repeat AngularJS中指定元素

3 个答案: