AngularJS 1.6.xコンポーネント転記スコープの問題

Question

私の子供のtransclude使用法で親バインディングにアクセスするにはどうすればいいですか？

親コンポーネント：

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

ここでは、ウィザードのコントローラーである：ここで

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

は、使用ある：

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

どのように私が取得するvm.pageへのアクセスを得るのですかウィザード（親）コンポーネントによって設定されますか？現在、vm.page、vm.next、およびvm.previousは正しく更新されていません。

Answer 1

私はあなたを正しく理解したかどうかはわかりません。

あなたが親コンポーネントへのアクセスを取得したい場合は、このような子コンポーネントに必要追加：

require: { parentComponent: '^^' }

その後、あなたは、これらのデータへのアクセスを取得する必要があります

this.parentComponent.page