angularjs - Render a directive inside another directive (within repeater template) -
i trying render directive inside directive (not sure if repeater inside template working this), , seems output text rather compiling directive (plunker code here: http://plnkr.co/edit/irsnk9)
any ideas on how can render my-dir-one, my-dir-two, my-dir-three directives inside repeater?
index.html
<!doctype html> <html ng-app="plunker" > <head> <meta charset="utf-8"> <title>angularjs plunker</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script> <script src="app.js"></script> <script id="partials/addressform.html" type="text/ng-template"> partial of type {{type}}<br> </script> </head> <body> <div container></div> <br /><br /><br /> <b>below test directives usable outside repeater</b> <div my-dir-one></div> <div my-dir-two></div> <div my-dir-three></div> </body> </html> app.js
var app = angular.module('plunker', []); app.directive('container', function () { return { restrict: 'a', scope: {}, replace: true, template: '<div class="views">' + ' <div class="view" ng-repeat="view in views">' + ' <div {{view.dir}}>{{view.dir}}</div>' + ' </div>' + '</div>', link: function (scope, elm) { scope.views = [ { dir: 'my-dir-one' }, { dir: 'my-dir-two' }, { dir: 'my-dir-three' } ]; } } }); app.directive('mydirone', function () { return { restrict: 'a', scope: {}, replace: true, template: '<div>this directive one.</div>' } }); app.directive('mydirtwo', function () { return { restrict: 'a', scope: {}, replace: true, template: '<div>this directive two.</div>' } }); app.directive('mydirthree', function () { return { restrict: 'a', scope: {}, replace: true, template: '<div>this directive three.</div>' } });
i managed work around issue re-writing code:
first updated template code follows:
template: '<div class="views">' + ' <div class="view-wrapper" ng-repeat="view in views">' + ' <div view="{{view.dir}}"></div>' + ' </div>' + '</div>', note created new 'view' directive. next view directive definition follows:
app.directive('view', ['$compile', function (compile) { return { restrict: 'a', scope: { view: '@' }, replace: true, template: '<div class="view"></div>', controller: ['$scope', function (scope) { scope.$watch('view', function (value) { scope.buildview(value); }); }], link: function (scope, elm, attrs) { scope.buildview = function (viewname) { var view = compile('<div ' + viewname + '></div>')(scope); elm.append(view); } } } }]); so essentially, view.dir variable passed attribute 'view' directive, watches it's value , compiles template directive in it.
Comments
Post a Comment