[英]angularjs using directive inside another directive template
I am trying to create a tab within a directive template, the tab works but I don't know how to render other directives when appropriate tab is selected. 我正在尝试在指令模板内创建一个选项卡,该选项卡有效,但是当选择适当的选项卡时,我不知道如何呈现其他指令。
Here is the code for my tabs directive. 这是我的tabs指令的代码。
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 I updated the template code as follows: 首先,我更新了模板代码,如下所示:
template: '<div class="views">' +
' <div class="view-wrapper" ng-repeat="view in views">' +
' <div view="{{view.dir}}"></div>' +
' </div>' +
'</div>',
Note that I created a new 'view' directive. 请注意,我创建了一个新的“ view”指令。 Next the view directive definition as 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, the view.dir variable is passed as an attribute to the 'view' directive, which then watches it's value and compiles a template with the directive in it. 因此,本质上,view.dir变量作为属性传递给“ view”指令,然后该指令监视其值并编译其中包含该指令的模板。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.