Question

我有这个指令：

    gymApp.directive('ngListar', function() { 
      return { 
        templateUrl: function(elem, attr){
          console.log(attr.type);
          return 'js/directives/listar-'+attr.type+'.html';
        }
      }; 
    });

我的想法是，当我调用指令时，会添加一个参数来确定要调用哪个html文件，所以html看起来像这样

    <tr ng-listar type="{{list.tipo}}"></tr>

但是日志打印出{{list.tipo}}而不是其中的值。有没有办法可以将表达式作为参数传递？

Answer 1

templateUrl（强调我的）文档中描述了这不起作用的原因：

由于模板加载是异步的，编译器将暂停关于该元素的指令的编译以供以后在模板中使用已经解决了。与此同时，它将继续编译和链接兄弟元素和父元素，就好像这个元素没有包含任何指令。

Angular所做的变量绑定是一个指令，因此在指令完成加载其模板之后才会完成。

至于解决方法，您可能需要亲自手动拨打$compile，而不是依靠templateUrl为您执行此操作。请参阅$compile下的第二个备注。

借用this answer中的一些代码，如果您使用$templateRequest，则可以在指令中执行以下操作：

link: function(scope, element, attr){
   $templateRequest('js/directives/listar-' + attr.type + '.html').then(function(html){
      var template = angular.element(html);
      element.append(template);
      $compile(template)(scope);
   });
};

$templateCache和$http.get也应该是与上述代码非常相似的选项。这应该解决尚未插值的问题。

Answer 2

打印范围变量，而不是获取attr。

app.directive("insertAfter", function(){
    return {
        scope: {
            content: "@",
            type: "@"
        }, 
        link: function(scope, element, attrs){
            console.log(scope.type);
            element.after(scope.content);
        }
    }
  });

将Angular表达式传递给自定义指令

2 个答案: