angularjs - Angular, ng-repeat to build other directives -
i'm building complex layout, takes json document , formats multiple rows, each row having more rows and/or combinations of rows/columns inside them.
i'm new angular , trying grips directives. easy use simple things, become difficult once need more complicated.
i guess i'm doing wrong way around, there way add name of directive (in example below, i've used ) , directive rendered on ng-repeat?
maybe same way can use {{{html}}} instead of {{html}} inside of mustache partial render html , not text.
as expected, example below writes name of directive dom. need angluar take name of directive, understand it, , render before before written. due complex layout of page need design, rendering many different directives, inside each other, 1 json document (which has been structured different rows , row / column combinations).
example code renders name of directive page, gives idea of how i'd write solution 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 second page type' }; }) .directive("apppagetype1", function factory() { console.log('into page type 1'); return { replace: true, template: 'this 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>
this 1 possible alternative idea. idea append directive defined in page object each html element inside ng-repeat. please take @ demo. hope 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); } }; }); 
Comments
Post a Comment