Javascript 使用ng单击更改指令模板

我在控制器中有几个按钮带有

ng click

，我想在单击按钮时更改a指令模板。实现这一目标的最佳方式是什么？（我将在稍后使用该元素的幻灯片）

指令：

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

指令：

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

---

您可以扩展@JB Nizet提供的示例，并使用

ng include

交换模板，这样管理更大的模板就更容易了

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

myModule.directive（'foo'，function（）{
返回{
范围：{
templateType:“@”
},
模板：“”+
''
};
});

---

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

/templateroot/a

或

/templateroot/b

）

您可以扩展@JB Nizet提供的示例，并使用

ng include

交换模板，管理更大尺寸的模板变得更容易

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

myModule.directive（'foo'，function（）{
返回{
范围：{
templateType:“@”
},
模板：“”+
''
};
});

---

现在，您可以创建单独的模板文件，并在特定的url上提供它们（在本例中，

/templateroot/a

或

/templateroot/b

）

我建议对每个局部视图使用不同的路径/视图如果两个模板都很大呢？然后将模板外部化为一个文件并使用templaterool，至于任何其他指令。@jbnitet那么如何将

templateType

值传递给templateUrl您不将templateType传递给templateUrl。您将其传递给指令，方法与上面相同。在指令中嵌入模板或从URL加载模板不会改变指令的工作方式。我建议对每个局部视图使用不同的路由/视图。如果两个模板都很大，会怎么样？然后将模板外部化为文件并使用templateUrl，至于任何其他指令。@jbnitet那么如何将

templateType

值传递给templateUrl您不将templateType传递给templateUrl。您将其传递给指令，方法与上面相同。在指令中嵌入模板或从URL加载模板不会改变指令的工作方式。使用

ng include

有意义。+1使用

ng include

有意义。+1