从控制器动态加载时呈现自定义指令

Question

我有三个自定义指令，例如 <sample-grid></sample-grid>、<sample-form></sample-form> 和 <sample-view></sample-view>。它们的定义方式如下：

angular.module("MyApp").directive('sampleGrid', [ function() {
    return {
        scope : {},
        restrict: 'EA',
        templateUrl : 'view/templates/sample-grid.tmpl.html',
        controller : 'SampleGridCtrl',
        scope: {
              scnid: '=',
          }
    };
} ]);

我有一个主视图，我正在以下列方式使用来自angular material 的<md-tabs> -

<md-tabs>
    <md-tab ng-repeat="tab in myCtrl.pageTabs track by $index">
        <md-tab-label>{{tab.tabName}}</md-tab-label>
            <md-tab-body>
                <div id="tab.tabName" ng-bind-html="tab.tabHTML"></div>
            </md-tab-body>
    </md-tab>
</md-tabs>

这个视图的控制器也定义为

angular.module("MyApp").controller("myCtrl",['$log','$scope','$sce', '$compile', function myCtrl ($log,$scope,$sce,$compile) {
    var homeScope = this;
    homeScope.pageTabs = [];

    var newTab = {};
    newTab.tabName = "Sample";
    newTab.tabHTML = $sce.trustAsHtml("<sample-grid></sample-grid>");
    newTab.tabAction = "grid";
    homeScope.pageTabs.push(newTab);

    var template = angular.element(document.querySelector('#Sample'));
    $compile(template)(homeScope);

}])

要求是：用户将能够在视图中添加新选项卡，并且我必须根据选择在视图中显示三个自定义指令之一。所以我必须将新的选项卡对象推送到 homeScope.pageTabs 并使用所需的属性。

问题是：推送选项卡对象后，创建了新选项卡，但自定义指令没有呈现到视图中。我可以在控制台中看到它：

<div id="tab.tabName" ng-bind-html="tab.tabHTML">
    <sample-grid></sample-grid>
</div>

我在这里看到了答案，因此我必须使用$compile 才能正确呈现它。我试过了，但我无法得到正确的解决方案。

所以我的问题是如何实现这个功能？而且，还有其他简单可行的方法来实现这一目标吗？

Answer 1

我稍微改变了你的控制器逻辑。你必须使用 compile 有点不同。

angular.module("MyApp").controller("myCtrl",['$log','$scope','$sce', '$compile', function myCtrl ($log,$scope,$sce,$compile) {
    var homeScope = this;
    homeScope.pageTabs = [];

    var template = $sce.trustAsHtml("<sample-grid></sample-grid>");
    var linkFn = $compile(template);
    var content = linkFn(scope);

    var newTab = {};
    newTab.tabName = "Sample";
    newTab.tabHTML = content;
    newTab.tabAction = "grid";
    homeScope.pageTabs.push(newTab);
}])