AngularJS - 未加载指令

Question

我正在使用 AngularJS 上的指令，但没有加载模板。

代码很简单，当我单击 newSearch() 按钮时，会创建一个新选项卡，并且它的内容必须使用指令和模板加载。

但是，指令不起作用，我只是有我的标签。

但是，如果我在 client.html 中手动放置标签，该指令可以正常工作。

我知道我错过了一些重要的事情，需要帮助才能理解，所以提前感谢您的支持。

这是我的 client.html ：

<div class="client" ng-controller="ClientController">
<tabset>
    <tab ng-repeat="tab in tabs" active="tab.active" disable="tab.disabled">
        <tab-heading ng-bind-html="tab.title">{{ tab.title }}</tab-heading>
        <div ng-bind-html="tab.content">{{ tab.content }}</div>
    </tab>
    <tab-heading>
        <button ng-click="newSearch()"><span class="glyphicon glyphicon-plus"></span></button>
    </tab-heading>
</tabset>
</div>

这是我的控制器和一些非常简单的指令：

app.controller('ClientController', ['$scope', '$sce', function($scope, $sce) {  
    var ctrl = this;

    $scope.tabs = [
        {
            title: $sce.trustAsHtml('Resume'),
            content: $sce.trustAsHtml('<client-resume></client-resume>')
        },
    ];
    ctrl.openView = function(title, content) {

        var tab = {
            title: $sce.trustAsHtml(title),
            content: $sce.trustAsHtml(content)
        };

        $scope.tabs.push(tab);
    };
    ctrl.closeView = function(index) {
        $scope.tabs.splice(index, 1);
    };
    $scope.newSearch = function() {
        ctrl.openView("Recherche", "<client-search></client-search>");
    };
    $scope.newFolder = function() { 
        ctrl.openView("Alfred Hitchcock", "<client-folder></client-folder>");
    };
}]);
app.directive('clientResume', function() {
    return {
        restrict: 'E',
        templateUrl: 'modules/Client/partials/template/_resume.tpls.html'
    };
});

Answer 1

你必须在你的代码中 $compile 内容变量，

喜欢：

                        var templateElement = angular.element('<p>{{total}}</p>');
                    var clonedElement = $compile(templateElement)(scope, function (clonedElement, scope) {

                    });