Question

我的问题是：当父控制器中变量的值发生变化时，是否可以更改组件模板？这里有两种我试图遵循的方式：

var topBarTemplateWithButton = [
'<section id="filters">',
'<div class="pull-left">',
'<h1>{{$ctrl.step}}</h1>',
'<div class="pull-left pageActionContainer">',
'<ng-transclude></ng-transclude>',
'</div>',
'</div>',
'</section>'].join(' ')

var topBarTemplateWithoutButton = [
    '<section id="filters">',
    '<div class="pull-left">',
    '<h1>{{$ctrl.step}}</h1>',
    '</div>',
    '</section>'].join(' ')

myApp.component('topBar', {
    bindings: {
        step: '<'
    },
    template: this.templateToUse,
    transclude: true,
    controller: function() {
        var me = this;

        me.$onInit = function() {
            this.templateToUse = topBarTemplateWithButton;
        }

        me.$onChanges = function(changes) {
            if(changes.step.currentValue != "Projects") {
                this.templateToUse = this.topBarTemplateWithoutButton;
            }else {

                this.templateToUse = topBarTemplateWithButton;

            }
        }
    }
});

和

var topBarTemplateWithButton = [
    '<section id="filters">',
    '<div class="pull-left">',
    '<h1>{{$ctrl.step}}</h1>',
    '<div class="pull-left pageActionContainer">',
    '<ng-transclude></ng-transclude>',
    '</div>',
    '</div>',
    '</section>'].join(' ')

var topBarTemplateWithoutButton = [
    '<section id="filters">',
    '<div class="pull-left">',
    '<h1>{{$ctrl.step}}</h1>',
    '</div>',
    '</section>'].join(' ')

myApp.component('topBar', {
    bindings: {
        step: '<'
    },
    template: '<div ng-include="$ctrl.templateToUse"/>,
    transclude: true,
    controller: function() {
        var me = this;

        me.$onInit = function() {
            this.templateToUse = topBarTemplateWithButton;
        }

        me.$onChanges = function(changes) {
            if(changes.step.currentValue != "Projects") {;
                this.templateToUse = this.topBarTemplateWithoutButton;
            }else {
                this.templateToUse = topBarTemplateWithButton;
            }
        }
    }
});

这两个例子都不起作用。因此，当step的值发生变化时，可以更改此组件的模板吗？谢谢你的帮助。

Answer 1

Template字段可以是返回模板的函数，它可以attrs作为注入。这是一个可以完成您正在寻找的内容的示例。

template: function(attrs) {
    "ngInject";
    // check for custom attribute and return different template if it's there
},

然而，重要的一点是，这些是未编译的属性，因为模板尚未编译。事实上，它无法编译，直到确定模板为止。所以他们检查的属性只能是一个字符串文字..

Answer 2

我认为这不是为一个组件使用两个不同模板的最佳做法。主要规则是使用一个控制器和一个视图。因此，从这个角度来看，实现此行为最好是在组件模板中使用ng-switch或ng-if，甚至可以创建两个不同的dumb组件 - topBarWithButton和{{1} }。在这两种情况下，您都可以通过绑定与组件进行交互。我认为使用topBarWithoutButton而不是使用attrs会有点麻烦。组件不是直接的，因此在构建基于组件的应用程序时必须考虑组件。我认为你不应该使用attrs有很多原因：

编译后无法更改模板。
您无法更改组件的状态。
您将状态保存在html模板中。
测试这种方法并不容易。

Angular：使用变量更改组件模板

2 个答案: