angularjs 在另一个指令模板中使用指令

Question

我正在尝试在指令模板中创建一个选项卡，该选项卡可以工作，但我不知道在选择适当的选项卡时如何呈现其他指令。

这是我的 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) {


    }])

Answer 1

首先我更新了模板代码如下：

template: '<div class="views">' +
          '    <div class="view-wrapper" ng-repeat="view in views">' +
          '        <div view="{{view.dir}}"></div>' +
          '    </div>' +
          '</div>',

请注意，我创建了一个新的“视图”指令。接下来查看指令定义如下：

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);
            }
        }
    }
}]);

所以本质上，view.dir 变量作为属性传递给“view”指令，然后查看它的值并编译一个包含该指令的模板。