javascript - AngularJS动态TemplateUrl值

我正在尝试将已经动态的值传递给我的指令，以获取该值的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的值始终是文字表达式“ {{cell.handler}}”，而不是相应的值。我尝试了许多不同的方式-您猜得到吗？

更新：

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

解决方法中，我使用了另一种有效的方法。但是我更喜欢通过使用templateUrl函数的初始方式，例如想检查“ handler”是否为有效值。

最佳答案

我认为这种替代方法可以起作用：

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>

关于javascript - AngularJS动态TemplateUrl值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23631617/