使用 ng-click 更改指令模板

Question

我在控制器中有几个带有 ng-click 的按钮，我想在单击按钮时更改指令模板。实现这一目标的最佳方法是什么？（后面我会用幻灯片效果的元素）

Answer 1

指令：

myModule.directive('foo', function() {
    return {
        scope: {
            templateType: '@'
        },
        template: '<div ng-if="templateType == \'a\'">' +
            '    this is template A ' +
            '</div>' +
            '<div ng-if="templateType == \'b\'">' +
            '    this is template B ' +
            '</div>'
    };
});

模板：

<foo template-type="{{ templateType }}"></foo>
<a ng-click="templateType = 'b'" href="">Set template to b</a>

控制器：

$scope.templateType = 'a';

Answer 2

您可以扩展@JB Nizet 提供的示例并使用ng-include 交换模板，并且管理更大尺寸的模板变得更加容易。

myModule.directive('foo', function() {
    return {
        scope: {
            templateType: '@'
        },
        template: '<div ng-include="\'/templateRoot/\' + templateType">'+
                  '</div>'
    };
});

现在您可以创建单独的模板文件并使它们在特定 url 上可用（在本例中为 /templateroot/a 或 /templateroot/b）

使用 ng-click 更改指令模板

Change a directive template using ng-click

javascript

angularjs

angular-directive