Question

使用Angular 1.6我正在定义一个如此指令：

angular
    .module('myApp')
    .directive('lyEntity', lyEntity);

function lyEntity() {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            type: '@'
        },
        controller: 'lyEntityController',
        controllerAs: 'vm',
        bindToController: true,
        templateUrl: function (elem, attrs) {
            return 'components/_templates/' + attrs.type + '.html'
        }
    };
}

但是在另一个模板中使用它是这样的：

<ly-entity model="vm.entity" type="{{vm.type}}"></ly-entity>

将导致templateURL components/_templates/{{vm.type}}.html

如何移交vm.type函数中使用的templateUrl的值？

Answer 1

是的，它不能按照您尝试这样做的方式完成，因为在插入属性之前会调用templateUrl函数。实现此目标的一种方法是使用ng-include。

return {
    restrict: 'E',
    scope: {
        type: '@'
    },
    link: function(scope, element, attrs){
        $scope.templateUrl = 'components/_templates/' + attrs.type + '.html';
    },
    template: '<ng-include src="templateUrl"/>'
};

因此，在 controller 中构建模板网址，以ng-include为模板，并将 src 指向构建的模板网址。

这是一篇关于如何使用动态模板的好文章：https://medium.com/angularjs-meetup-south-london/angular-directives-using-a-dynamic-template-c3fb16d03c6d#.mizywdk6s

Answer 2

感谢@Chantu，我找到了一个适合我的解决方案：

指令：

angular
    .module('myApp')
    .directive('lyEntity', lyEntity);

function lyEntity() {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            type: '='
        },
        controller: 'lyEntityController',
        controllerAs: 'vm',
        bindToController: true,
        template: '<ng-include src="templateUrl"/>'
    };
}

控制器：

$scope.templateUrl = 'components/_templates/' + vm.type + '.html';

并称之为：

<ly-entity model="vm.entity" type="vm.type"></ly-entity>

无法切换attrs.value到Directive的templateUrl函数

2 个答案: