Question

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

代码很简单，当我点击newSearch（）按钮时，会创建一个新的Tab，并且它的内容必须加载一个指令及其模板。

但是，该指令不起作用，我有一个标签。

但是，如果我手动将标记放在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

你必须在代码中编译内容变量，

喜欢：

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

                    });

AngularJS - 未加载指令

1 个答案: