按下按钮时将输入值发送到单独的组件 - AngularJS

Question

我有两个组件都链接到同一个模块：

angular.module('app', []);

第一个组件是一个简单的输入框和按钮

angular.module('app').component('myInput', {

    template: '<input data-ng-model="$ctrl.value"/>' +
              '<button data-ng-click="$ctrl.post()">Post</button>',

    controller: function MyInputController(){
        this.value = "";
        this.post = function(){
            // get this.value from input and send to other component
        };
    }

});

第二个组件只是一个基于控制器中数组的重复P标签

angular.module('app').component('myOutput', {

    template: '<p data-ng-repeat="item in $ctrl.data">{{ item.value }}</p>',

    controller: function MyOutputController(){
        this.data = [{value: "Example Data"}];
        /* 
           When this receives the data from the other component
           it will push() it into this.data
        */
    }
});

如何让<my-input/> 组件的$ctrl.post() 方法将数据发送到另一个<my-output/> 组件，以便它可以push() 将它放入它的data 数组并被@987654329 拾取@?

或者，是否可以将push() 直接放入其他组件的controller.data 数组中？

我的意思是，归根结底，它们都是普通的旧对象！

Answer 1

为了在不同范围之间传递数据，您可以：

1) 将此数据存储在 angularjs service(provider) 中，并通过 DI 将其注入您的控制器中。在我看来，如果您的组件彼此远离，这是最好的方式。

2) 使用scope propagation（$scope.emit() 或$scope.broadcast()）在不同范围之间发送和接收数据。但是，如果您的组件不在“祖先 后代”关系中，我认为这不是一个好主意。在您的情况下，您可以为两个控制器创建一个父控制器，您将从my-input 组件向其发送数据，通过$scope.on() 捕获它，然后发送到my-output。否则，您可以使用$rootScope 在组件之间进行通信。

3) 在指令/组件的父子范围之间使用数据绑定（有关详细信息，请阅读this）。在您的情况下，考虑到您的组件不是父母和孩子，这也不是一个好主意。