Question

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

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

我想我这样做是错误的，但有没有办法简单地添加一个指令的名称（在下面的例子中，我已经使用过）并获得该指令在ng-上呈现重复？

也许您可以使用{{{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>

Answer 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

Angular，ng-repeat用于构建其他指令

1 个答案: