AngularJS 1.6.x的動態的HTML字符串和NG-如果=負載組件「{{}}」

Question

我有動態加載組件具有的問題{{}}使用角1.6.x的

我可以加載組件動態地使用compile編譯，但我遇到的問題是在html字符串中添加ng-if = {{}}。

如果我走這條路線，它將採取什麼vm.page當時設置。即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)); 
} 

以上呈現：

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

我怎麼能說與編譯{{}}在字符串中如此vm.page使用數據綁定，當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); 
} 

我想上面的一起工作：

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

Answer 1

變更爲 「當前頁」：

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

添加 '當前頁' 的結合，從而可用於新的範圍分量：

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

添加可變輸入來標記

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

... 

</wizard> 

這是未經測試，但希望給你的想法。此外，如果隔離範圍有能力更改當前頁面，則您需要將其更新爲雙向綁定。