angularjs - 基于元素属性插值的指令中的动态 templateUrl

Question

我有一个如下所示的 html 元素:

<new-element data-type="{{widget.type}}"></new-element>

我想让我的指令根据 type 是什么使用不同的 templateUrl。

appDirectives.directive('newElement', function() {          
    return {
        restrict : 'E',
        scope: false,               
        templateUrl: function(elem, attrs) {      
            var template_url = (attrs.type == 'widgetA') ? 'template-a.html' : 'template-other.html';
            return template_url;
        }
    }
});

总是返回的模板是 template-other.html 因为 type 值仍然是 {{widget.type}} 并且还没有被插值。

有没有什么方法可以监视 type 属性并相应地更改模板？

Answer 1

你不能那样做:

var template_url = (attrs.type == 'widgetA') ? 'template-a.html' : 'template-other.html';

因为您无法访问模板方法中的指令属性，但您可以这样做:

appDirectives.directive('newElement', function() {          
    return {
        restrict : 'E',
        scope: {},
        bindToController: {
         type: '='
        },
        controller: 'SomeController',
        controllerAs: 'ctrl',
        template: '<div ng-if="ctrl.type === 'widgetA'"><!-- your widgetA contet --></div><div ng-if="ctrl.type === 'widgetB'"><!-- your widgetB content --></div>';
    }
});

在这里你可以找到一篇关于如何使用链接功能做你想做的事情的文章，但我建议改用 Controller 。

http://onehungrymind.com/angularjs-dynamic-templates/