динамический шаблон для директивы в angularjs

Question

Мне нужно определить шаблон на основе даты. Я видел хорошее example. Но в этом примере шаблоны настолько просты, что он мог использовать строки. В моем случае я хочу использовать PHP для создания шаблонов, так что я использовал это следующим образом:

eng.directive('vis', function ($compile) { 
var getTemplate = function(ir) { 
    var k = (ir.visits.last && parseInt(ir.visits.last.done))?'V':'E'; 
    var s = (ir.data.kind == 0)?'H':'V'; 
    return s+k+'T'; 
} 

var linker = function(scope, element, attrs) { 
    scope.$watch('ir',function(){ 
     if (!scope.ir) return; 
     element.html(jQuery('#'+getTemplate(scope.ir)).html()).show(); 
     $compile(element.contents())(scope); 
    }) 
} 
return { 
    restrict: "E", 
    rep1ace: true, 
    link: linker 
};}); 

и шаблоны:

<div id=HVT style="display:none"> 
    <p>horizontal view template</p> 
</div> 
<div id=HET style="display:none"> 
    <p>horizontal {{1+5}} Edit template</p> 
</div> 
<div id=VVT style="display:none"> 
    <p>vertical view template</p> 
</div> 
<div id=VET style="display:none"> 
    <p>vertical Edit template</p> 
</div> 

Я уверен, что есть более разумный способ. лучше использовать templateUrl? может кто-нибудь сказать мне, как использовать его в моем случае?

Редактировать: есть проблема. шаблон не видит сферу

Answer 1

Это также возможно для создания динамических шаблонов в AngularJS: В вашем использовании директивы:

template : '<div ng-include="getTemplateUrl()"></div>' 

Теперь ваш контроллер может решить, какой шаблон использовать:

$scope.getTemplateUrl = function() { 
    return '/template/angular/search'; 
}; 

Потому что у вас есть доступ к ваши параметры охвата, вы также можете сделать:

$scope.getTemplateUrl = function() { 
    return '/template/angular/search/' + $scope.query; 
}; 

Таким образом, ваш сервер может создать для вас динамический шаблон.

Answer 2

я найти решение here

В этом примере http://jsbin.com/ebuhuv/7/edit

найти этот код:

app.directive("pageComponent", function($compile) { 
    var template_for = function(type) { 
     return type+"\\.html"; 
    }; 
    return { 
     restrict: "E", 
     // transclude: true, 
     scope: true, 
     compile: function(element, attrs) { 
      return function(scope, element, attrs) { 
       var tmpl = template_for(scope.component.type); 
       element.html($("#"+tmpl).html()).show(); 
       $compile(element.contents())(scope); 
      }; 
     } 
    };}); 

Answer 3

с угловыми, вам не нужно использовать id s. Кроме того, вместо display:none вы можете использовать ng-show:

<div ng-show="HVT"> 
    <p>horizontal view template</p> 
</div> 
<div ng-show="HET"> 
    <p>horizontal {{1+5}} Edit template</p> 
</div> 
... 

Ваш $ часы обратного вызова (который можно определить на контроллере или в директиве) может затем просто изменить соответствующую область свойства:

var getTemplate = function (ir) { 
    var k = (ir.visits.last && parseInt(ir.visits.last.done)) ? 'V' : 'E'; 
    var s = (ir.data.kind == 0) ? 'H' : 'V'; 
    return s + k + 'T'; 
} 
$scope.$watch('ir', function() { 
    if (!$scope.ir) return; 
    // hide all, then show the one we want 
    $scope.HVT = false; 
    $scope.HET = false; 
    $scope.VVT = false; 
    $scope.VET = false; 
    $scope[getTemplate($scope.ir)] = true; 
}) 

Fiddle. Сценарий имеет вышеуказанный код в контроллере, так как я понятия не имею, где вы можете использовать директиву. Скрипка также просто жестко кодирует «ПОО», так как я не знаю, как выглядит ir.