AngularJS 1.6.x Component Transclude Scope Problème

Question

Comment faire pour accéder à la liaison parente dans mon utilisation de transclude enfant?

Parent Composant:

<div class="wizard-container" ng-animate="transitionClass"> 
    <section> 
     <nav> 
      <ol class="cd-breadcrumb triangle align-center align-item"> 
       <li ng-repeat="breadCrumb in vm.breadcrumbs track by $index" ng-class="{ current: $index + 1 === vm.page}" > 
        <em><i class="fa {{breadCrumb.icon}}" aria-hidden="true"></i>{{breadCrumb.title}} 
        </em> 
       </li> 
      </ol> 
     </nav> 
     <div> 
      <ng-transclude></ng-transclude> 
     </div> 
    </section> 

</div> 
... 

Voici l'assistant du contrôleur:

app.controller('wizardController', wizardController); 
wizardController.$inject = ['$scope', '$compile']; 

function wizardController($scope, $compile) { 
    var vm = this; 
    vm.page = 1; 
    vm.next = true; 
    vm.previous = false; 

    vm.nextPage = function() { 
     vm.page < vm.breadcrumbs.length ? vm.page += 1 : vm.page; 

     vm.next = true; 
     vm.previous = false; 
    }; 

    vm.previousPage = function() { 
     vm.page > 1 ? vm.page -= 1 : vm.page; 

     vm.previous = true; 
     vm.next = false; 
    }; 

    vm.submit = function() { 
     vm.page = 1; 

     vm.next = true; 
     vm.previous = false; 
    } 

}; 

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

est ici l'utilisation:

<wizard breadcrumbs="vm.breadcrumbs" wizard-pages="vm.wizardPages" page="1"> 
    <div ng-if="vm.page === 1" ng-class="{ 'next': vm.next, 'previous': vm.previous }"> 
     <service-center-branch-selection> 

     </service-center-branch-selection> 
    </div> 
</wizard> 

Comment puis-je avoir accès à vm.page qui obtient défini par le composant assistant (parent)? Pour l'instant, vm.page, vm.next et vm.previous ne sont pas mis à jour correctement.

Answer 1

Je ne sais pas si je vous ai bien compris.

Si vous souhaitez avoir accès à un ajout de composant parent ont besoin d'un composant enfant comme celui-ci:

require: { parentComponent: '^^' }

Ensuite, vous devez avoir accès à ces données:

this.parentComponent.page