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

我有一个html元素，如下所示：

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

始终返回的模板是

template other.html

，因为

type

值仍然是

{{widget.type}}

，尚未插入

有没有办法在

type

属性上放置一个手表，并相应地更改模板？

您不能这样做：

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>';
    }
});

appdirections.directive（'newElement'，function（）{
返回{
限制：'E'，
作用域：{}，
bindToController：{
类型：'='
},
控制器：“SomeController”，
controllerAs:'ctrl'，
模板：“”；
}
});

在这里，你可以找到一篇关于如何使用link函数做你想做的事情的文章，但是我建议使用一个控制器

---

也许您可以在angularJs中使用

routeProvider

。

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>';
    }
});