javascript - angularjs using directive inside another directive template -
i trying create tab within directive template, tab works don't know how render other directives when appropriate tab selected.
here code tabs directive.
angular.module('myapp') .directive('q2022tabs', ['$rootscope', function ($rootscope) { return { restrict: 'ea', transclude: true, scope: { max: '=', label: '=' }, require: "q2022pieradarchart" + "q2022radarchart", template: ` <form name="outerform" class="tab-form-demo"> <uib-tabset active="activeform"> <uib-tab index="1" heading="radar chart"> (content tab) </uib-tab> <uib-tab index="2" heading="pie radar chart"> (content tab 2) </uib-tab> </uib-tabset> </form> ` }; }]) .controller('excontroller', ['$scope', '$rootscope', function ($scope, $rootscope) { }])
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