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: '=',
          }
    };
} ]);

我有一个主视图，我从<md-tabs>以下列方式使用angular material -

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

}]）

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

问题是：在按Tab键对象后，会创建新选项卡，但自定义指令不会呈现到视图中。我可以在控制台中看到它：

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

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

1 个答案: