1

I'm building a complex layout, that takes a JSON document and then formats it into multiple rows, with each row then having more rows and/or combinations of rows/columns inside them.

I'm new to Angular and am just trying to get to grips with Directives. They are easy to use for very simple things, but quickly become very difficult once you need to anything more complicated.

I guess I'm doing this the wrong way around, but is there a way to simply add the name of a directive (in the example below, I've used ) and get that directive to be rendered on an ng-repeat?

Maybe the same way that you can use {{{html}}} instead of {{html}} inside of mustache to get a partial to render as HTML and not text.

As expected, the example below simply writes the name of the directive into the dom. I need Angluar to take the name of the directive, understand it, and then render before before it is written. Due to the complex layout of the page I need to design, I could be rendering many different directives, all inside each other, all from 1 JSON document (which has been structured into different rows and then row / column combinations).

Example code that renders the name of the directive to the page, but gives you an idea of how I'd like to write a solution the problem...

<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>

4

1 回答 1

1

This is one possible alternative to your idea. The idea is to append the directive you defined in page object for each html element inside the ng-repeat. Please take a look at the demo. Hope it helps.

<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

于 2013-08-07T16:19:56.640 回答