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와 동적 템플릿을 만드는 것도 가능합니다 범위 매개 변수를 사용하면 다음을 수행 할 수도 있습니다.

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

그러면 서버에서 동적 템플릿을 만들 수 있습니다.

Answer 2

내가이 예 http://jsbin.com/ebuhuv/7/edit

에서 솔루션 here

을 찾을 범위가 표시되지 않습니다 각도와

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를 사용할 필요가 없습니다 에스.

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

: 단순히 적절한 범위 속성을 수정할 수 있습니다 (당신이 컨트롤러 또는 지침에서 정의 할 수 있습니다)

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

귀하의 $ 시계 콜백 : 또한, 대신 display:none의 당신은 ng-show을 사용할 수 있습니다 Fiddle. 위의 코드는 컨트롤러에서 위의 코드를 사용합니다. 지시어를 어디에서 사용하고 있는지 모르기 때문입니다. 내가 ir이 어떤 모양인지 모르기 때문에 바이올린은 단지 "VET"을 하드 코드합니다. 당신의 지시어 사용에서 :

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

지금 컨트롤러가 사용하는 템플릿을 결정할 수있다 :

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

를 액세스 권한을 가지고 있기 때문에