Question

我试图将已经动态的值传递给我的指令，以获取此值的templateUrl。让我解释一下Sourecode：

<p ng:repeat="cell in field.Cells">
   <cell-element handler="{{cell.handler}}"/>
   <!-- cell.handler is e.g. "User" -->
</p>

myapp.directive('cellElement', function() {
  return {

    restrict: 'E',       

    templateUrl: function (tElement, tAttrs, $compile) {
      return '/ajax/' + tAttrs.handler == undefined ? 'foo' : tAttrs.handler +'.html';
    },       
 }
 });

不幸的是，tAttrs.handler的值始终是文字表达式＆＃34; {{cell.handler}}＆＃34;而不是相应的价值。我尝试了很多不同的方法 - 任何猜测？

更新：

myapp.directive('cellElement', function() {
return {        
   restrict: 'E',
   scope: { handler: '=handler' },
   template: '<ng-include src="\'/ajax/\' + handler"></ng-include>'    
}
});

作为解决方法，我使用了另一种有效的方法。但我更喜欢使用templateUrl函数的初始方式，例如想检查＆＃34;处理程序＆＃34;是一个有效的值。

Answer 1

我认为这种替代方案可行：

myapp.directive('cellElement', function() {
  return {
    restrict: 'E',       
    template: '<div data-ng-include="templateUrl"></div>',
    link: function ($scope, iElement, attr) {
        $scope.templateUrl= $scope[attr.handler];
    }

 }

你必须在没有支持的情况下进行消费：

<p ng:repeat="cell in field.Cells">
   <cell-element handler="cell.handler"/>
   <!-- cell.handler is e.g. "User" -->
</p>

Answer 2

问题可能是模板未编译，因此您想要的值尚未插值。如果您尝试在链接功能中检索它，它将起作用。

AngularJS动态TemplateUrl值

2 个答案: