AngularJS 1.6.x Dynamiquement charger des composants avec la chaîne html et ng-if = "{{}}"

Question

J'ai un problème dynamique des composants de chargement avec {{}} à l'aide angulaire 1.6.x

Je peux charger la composants dynamiquement très bien en utilisant la compilation, mais le problème auquel je fais face est d'ajouter un ng-if = {{}} à la chaîne html.

Si j'emprunte cette route, cela prendra tout ce que vm.page est réglé à ce moment-là. à-dire 1:

for (var i = 0; i < vm.wizardPages.length; i++) { 
    var newScope = $scope.$new(true, $scope); 
    newScope = angular.merge(newScope, vm.wizardPages[i]); 
    var html = '<' + vm.wizardPages[i].componentName + ' ng-if="' + 
    vm.page + ' === ' + (i + 1) + '"></' + vm.wizardPages[i].componentName 
    + '>'; 
    var element = $('page'); 
    element.append($compile(html)(newScope)); 
} 

Au-dessus rend:

<service-center-branch-selection ng-if="1 === 1" class="ng-scope ng-isolate-scope"> 
    ... 
</service-center-branch-selection> 

Comment puis-je appeler compiler avec {{}} dans la chaîne si vm.page utilise la liaison de données et peuvent changer lorsque la valeur change vm.page ?:

// loop through the data and inject components 
for (var i = 0; i < vm.wizardPages.length; i++) { 
    var newScope = $scope.$new(true, $scope); 
    newScope = angular.merge(newScope, vm.wizardPages[i]); 
    var html = '<' + vm.wizardPages[i].componentName + ' ng-if="{{vm.page}} === ' + (i + 1) + '"></' + vm.wizardPages[i].componentName + '>'; 
    var element = $('page'); 
    element.append($compile(html)(newScope)); 
    console.log(newScope); 
} 

Je veux que ci-dessus pour travailler avec:

<service-center-branch-selection ng-if="vm.page === 1" class="ng-scope ng-isolate-scope"> 
    ... 
</service-center-branch-selection> 

Answer 1

changé à "currentPage":

// loop through the data and inject components 
for (var i = 0; i < vm.wizardPages.length; i++) { 
    var newScope = $scope.$new(true, $scope); 
    newScope = angular.merge(newScope, vm.wizardPages[i]); 
    var html = '<' + vm.wizardPages[i].componentName + ' ng-if="currentPage === ' + (i + 1) + '"></' + vm.wizardPages[i].componentName + '>'; 
    var element = $('page'); 
    element.append($compile(html)(newScope)); 
    console.log(newScope); 
} 

Ajouter 'currentPage' liant au composant si disponible pour de nouvelles possibilités:

app.component("wizard", { 
    template: require('./wizard.component.html'), 
    controllerAs: "vm", 
    controller: wizardController, 
    bindings: { 
      breadcrumbs: '<', 
      wizardPages: '<', 
      currentPage: '<' 
    } 
}); 

Ajouter entrée variable pour baliser

<wizard breadcrumbs="vm.breadcrumbs" wizard-pages="vm.wizardPages" current-page="vm.page"> 

... 

</wizard> 

Ceci est non testé, mais je l'espère vous donne l'idée. En outre, si la portée isolate a la possibilité de changer la page en cours, vous devrez alors la mettre à jour avec une liaison bidirectionnelle.