Angular, ng-repeat 构建其他指令答案

【问题标题】：Angular, ng-repeat to build other directivesAngular, ng-repeat 构建其他指令
【发布时间】：2013-08-09 02:39:58
【问题描述】：

我正在构建一个复杂的布局，它采用 JSON 文档，然后将其格式化为多行，每行然后有更多的行和/或行/列的组合。

我是 Angular 的新手，我只是想掌握指令。它们很容易用于非常简单的事情，但一旦您需要更复杂的事情，它们很快就会变得非常困难。

我想我这样做是错误的，但是有没有一种方法可以简单地添加指令的名称（在下面的示例中，我使用过）并让该指令在 ng- 上呈现重复？

也许您可以在 mustache 中使用 {{{html}}} 而不是 {{html}} 来获得部分渲染为 HTML 而不是文本。

正如预期的那样，下面的示例只是将指令的名称写入 dom。我需要 Angluar 取指令的名字，理解它，然后在写之前渲染。由于我需要设计的页面布局复杂，我可能会渲染许多不同的指令，它们都在彼此内部，全部来自 1 个 JSON 文档（已被结构化为不同的行，然后是行/列组合）。

将指令名称呈现给页面的示例代码，但让您了解我想如何编写解决问题的方法...

<div app-pages></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>

<script>
    var app = angular.module("app", ['main']);

    angular.module('main', [])

    .controller("appPageController", ['$scope', function( $scope ){
        $scope.pages = [];

        var page1 = {
            title: 'Page 1',
            directive: '<app-page-type-1>'
        };

        var page2 = {
            title: 'Page 2',
            directive: '<app-page-type-2>'
        };

        $scope.pages.push(page1);
        $scope.pages.push(page2);
    }])

    .directive("appPageType2", function factory() {
        console.log('into page type 2');
        return {
            replace: true,
            template: 'This is the second page type'
        };
    })

    .directive("appPageType1", function factory() {
        console.log('into page type 1');
        return {
            replace: true,
            template: 'This is the first page type'
        };
    })

    .directive("appPages", function factory() {
        console.log('into pages');
        return {
            replace: true,
            template: '<ul><li ng-repeat="page in pages">{{page.directive}}</li></ul>'
        };
    });

</script>

【问题讨论】：

您是否尝试让 Angular 动态选择要呈现的指令？
- {{page.directive}}
在转发器中无论如何都不会工作。
是的，我正在尝试让 Angular 动态选择要渲染的指令。
好的，很酷，如果不能在中继器内完成，我会考虑另一种方法。也许以不同的方式构建模型
@joseph_carney 我对你的实现做了一些调整，请看看我的回答。

标签： angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

这是您想法的一种可能替代方案。这个想法是为ng-repeat 中的每个html 元素附加您在页面对象中定义的指令。请看一下演示。希望对您有所帮助。

<div ng-app="myApp" ng-controller="appPageController">
    <ul>
        <li ng-repeat="page in pages" app-pages></li>
    </ul>
</div>

.directive("appPages", function ($compile) {
    console.log('into pages');
    return {
        replace: true,
        link: function (scope, elements, attrs) {
            var html = '<div ' + scope.page.directive + '></div>';
            var e = angular.element(html);
            elements.append(e);
            $compile(e)(scope);
        }
    };
});

Demo

【讨论】：