AngularJs 1.5 - 无法通过父组件在两个组件之间进行通信

Question

我有 3 个组件，顺序如下：1 个父组件和 2 个子组件。我需要运行父组件中的一个函数，方法是从两个子组件中的任何一个启动它。

两个子组件 js 文件如下所示：

angular
    .module('app)
    .component(childComponent1, {
        bindings: {
            switch: '&'
        },
        templateUrl: '...',
        controller: ['$scope', function ($scope) {    
        }]
    });

angular
    .module('app)
    .component(childComponent2, {
        bindings: {
            switch: '&'
        },
        templateUrl: '...',
        controller: ['$scope', function ($scope) {    
        }]
    });

父组件：

angular
    .module('app)
    .component(parentComponent, {
        bindings: {
            switch: '&'
        },
        templateUrl: '...',
        controller: ['$scope', function ($scope) {
           this.switch = function(){
               'some code...'
            }
        }]
    });

在每个子组件模板中都有一个按钮，它应该运行父函数 switch，像这样：

<button class="btn" ng-click="$ctrl.switch()">Back</button>

代码无效，有什么建议吗？

Answer 1

与其使用绑定，不如尝试在子组件中使用所需的参数来访问父组件控制器。

require: {
   parentCtrl: '^parentComponent'
},

查看 https://plnkr.co/edit/fPGuZzIqNbfXeBGXve4J?p=preview 以获取此方法的示例。

此外，如果使用 .component 来尝试让您的 Angular 1.5 更容易升级到 Angular 2.0，您还应该尝试避免在组件控制器中使用 $scope。

AngularJs 1.5 - 无法通过父组件在两个组件之间进行通信

AngularJs 1.5 - unable to communicate between two components via parent component

angularjs-components