AngularJS指令通过templateUrl函数传递参数

时间:2014-07-23 18:21:44

标签: javascript angularjs angularjs-directive

我试图将我的模板从内嵌移动到它自己的文件中。在我从template更改为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?

1 个答案:

答案 0 :(得分:4)

我从未见过这种方式,我总是将字符串传递给templateUrl属性,如

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

您可以在链接功能中指定指令元素中的attrs:

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

我为你准备了plunk