Question

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

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

第一个Component是一个简单的输入字段和按钮

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

如何获取$ctrl.post()组件的<my-input/>方法，以便将数据发送到其他<my-output/>组件，以便push()组成data组件data-ng-repeat }数组并被push()？

选中

Alernatively，是否可以controller.data直接进入其他组件的<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.XXXXX.computerscienceinduction"> <uses-permission android:name="android.permission.INTERNET" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".UserTypeSelection" /> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> <activity android:name=".RegistrationActivity"></activity> <activity android:name=".MainActivity" /> <activity android:name=".LoginActivity" /> <activity android:name=".ProfileActivity" /> </application> </manifest>数组？

我的意思是，当它归结为它时，它们都只是正常的旧物体！

Answer 1

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

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

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

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

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

1 个答案:

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