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> 

这是未经测试，但希望给你的想法。此外，如果隔离范围有能力更改当前页面，则您需要将其更新为双向绑定。