Я работаю с директивой по 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'
};
});
вы должны компилировать переменную содержимого в свой код,
как:
var templateElement = angular.element('<p>{{total}}</p>');
var clonedElement = $compile(templateElement)(scope, function (clonedElement, scope) {
});