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>',

請注意，我創建了一個新的“ view”指令。 接下來，視圖指令定義如下：

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”指令，然后該指令監視其值並編譯其中包含該指令的模板。