angularjs - TemplateUrl 指令 : AngularJs

Question

是否可以将范围读入指令的 templateUrl 中？

我想做这样的事情:

mDirective.directive('directive', [function () {
    return {
        restrict: 'A',
        scope: {
            types :'=types'
        },

templateUrl:'.mytemplate/'+scope.types+'.html'

Answer 1

范围在指令的 templateUrl 中不可用。 github 上有一个功能请求:Either add scope to attributes that are passed to templateUrl function or preprocess attributes based on scope parameters .

这里有两个选项(第二个是更通用的用途):

属性:范围不可用。但原始属性是。所以，如果 raw 属性适合你，例如，如果它只是一个像这样的静态字符串:

<div directive types="test1"></div>

然后我们可以传递一个函数到 templateUrl .第二个参数将是属性，因此您可以使用该字符串构造一个模板 URL，如下所示:

templateUrl: function(elem, attrs){ return ('mytemplate/'+attrs.types+'.html')},

但这在 types 时不起作用可能会发生变化，因此可能会为您提供更好的解决方案:

ngInclude 您可以在 ngInclude 中引用作用域变量源表达式。所以不要使用 templateURL我们使用 template然后让 ngInclude处理设置/更改模板:

template: '<div ng-include src="\'mytemplate/\'+types+\'.html\'"></div>',

您还可以手动编译并将模板添加到指令中。但是使用 ngInclude很容易，还可以启用动画。

demo plunker显示两个选项，并有几个按钮来切换模板，请参阅 ngInclude转变。