AngularJS 指令通过 templateUrl 函数传递参数 [英] AngularJS directive pass parameters through templateUrl function

问题描述

我正在尝试将我的模板从内嵌移动到它自己的文件中.在我从模板更改为 templateUrl 之前，一切正常

I'm trying to move my template from being in-line to it's own file. Everything was working before I changed from template to templateUrl

Glenn.directive('test', function($compile) {
    return {
        restrict: 'A',
        priority: 1000,
        terminal: true,
        templateUrl: function(tElement, tAttrs) {
            return ('test.html');
        },
        link: function(scope, element, attrs) {     
            attrs.$set('editable-text', 'content.' + attrs.edit + '.data');
            attrs.$set('edit', null);
            $compile(element)(scope);
        }
    }
});

test.html

{{ 'content.' + tAttrs.edit + '.data' }}

<button ng-click="' + tAttrs.edit + '_form'+ '.$show()" ng-hide="' + tAttrs.edit + '_form'+ '.$visible">edit</button>

为什么没有将 tAttrs 传递给我的模板 test.html?

Why isn't the tAttrs being passed to my template test.html?

推荐答案

我从来没有见过这种情况，我总是像

I never seen this that way, i always pass an string to the templateUrl property like

...
templateUrl: './foodirective.tmpl.html'
...

您可以从链接函数中的指令元素分配属性:

You could assign the attrs from your directive element in the linking function:

myApp.directive('fooDirective', function(){
  return{
    restrict: 'E',
    scope: true,
    templateUrl: './foodirective.tmpl.html',
    link: function(scope, elem, attrs){
      // do stuff
      scope.tAttrs = attrs;
    }
  }
})

我为您准备了一个plunk.

这篇关于AngularJS 指令通过 templateUrl 函数传递参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！