AngularJS 1.6.x组件包含范围问题

Question

How to do get access to the parent binding in my child transclude usage?

Parent Component:

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

Here is the wizard 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
});

Here is the usage:

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

How do I get access to vm.page that gets set by the wizard(parent) component? Right now vm.page, vm.next, and vm.previous are not updating properly.

Answer 1

I'm not sure if I did understand you correctly.

If you want to get access to a parent component add require to a child component like this:

require: { parentComponent: '^^' }

Then you should get access to these data:

this.parentComponent.page