AngularJS 1.6.x Component Transclude Scope Problem

Question

Wie bekomme ich Zugriff auf die Elternbindung in meinem Kind, um die Verwendung zu umgehen?

Geordnete Komponente:

<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> 
... 

Hier ist der Assistent Controller:

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

Hier ist die Nutzung ist:

<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> 

Wie kann ich Zugang zu vm.page erhalten, bekommt festgelegt von der Wizard (Eltern) -Komponente? Derzeit werden vm.page, vm.next und vm.previous nicht ordnungsgemäß aktualisiert.

Answer 1

Ich bin mir nicht sicher, ob ich dich richtig verstanden habe.

Wenn Sie Zugriff auf eine übergeordnete Komponente Add bekommen benötigen, um ein Kind Komponente wie folgt aus:

require: { parentComponent: '^^' }

Dann sollten Sie den Zugriff auf diese Daten erhalten:

this.parentComponent.page