Question

如何在我的孩子转换使用中访问父绑定？

父组件：

function testFunction() {
    $output = @{};
    $output.A= "123";

    return $output | Format-List
}

$result = testFunction
$result.A #gives empty value

这是向导控制器：

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

如何访问由向导（父）组件设置的vm.page？现在vm.page，vm.next和vm.previous没有正确更新。

Answer 1

我不确定我是否理解正确。

如果您想要访问父组件，请向这样的子组件添加require：

require: { parentComponent: '^^' }

然后您应该可以访问这些数据：

this.parentComponent.page

AngularJS 1.6.x组件转换范围问题

1 个答案: