如何在 AngularJS 1.x 中将数据从组件发送到父级

Question

我有两个选项卡作为一个组件，其中包含一些输入字段，当我按下 SAVE 按钮时，我想获取它们的值并将其保存到服务器。问题是 SAVE 函数在 index.js（父级）中，而 输入字段 在 TestComponent.js 中。我找不到从组件获取值并将其发送到父控制器的方法 (indexController.js)。

我也尝试过使用binding，例如将所有数据保存为一个对象并将该对象发送到indexController.js，但不幸的是我没有成功。

请同时查看 PLUNKER 示例。

谁能帮我解决这个问题。

index.html

<body ng-app="heroApp">

<div ng-controller="MainCtrl as vm">

  <!-- Component Started -->
  <md-tabs>
    <tab-component> </tab-component>
  </md-tabs>
  <!-- Component Ended -->

  <button type="submit" ng-click="save()"> Save </button>

</div>

</body>

index.js

(function(angular) {
  'use strict';
angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
  var vm = this;

  this.onStatusChange = function(data) {
    vm.mandatoryFilesIncluded = data;
  };

  this.save = function() {
    vm.requestInProgress = true;
    vm.Upload.upload({
      url: someURL,
      arrayKey: '',
      data: {
        file: vm.files,
        name: vm.data.name,
        title: vm.data.title,
        description: vm.data.description,
      }
    }).then(function(response){
        alert("data is uploaded.");
    });
  };

});
})(window.angular);

tabComponent.html

<!-- Upload Tab-->
<md-tab id="picTab" label="Pic">
  <div layout-gt-xs="row" layout-align="start center">

    <md-input-container style="padding-left: 0">
      <md-button>
        <md-icon class="material-icons">attach_file</md-icon>
      </md-button>
    </md-input-container>

  </div>
</md-tab>


<!-- Info Tab-->
<md-tab id="infoTab" label="Info">
  <md-content class="md-margin">

    <div layout-gt-sm="row">
      <!-- Name -->
      <md-input-container>
        <label>Name</label>
        <input ng-model="vm.data.name" name="name" required>
      </md-input-container>

      <!-- Title -->
      <md-input-container class="md-block" flex-gt-sm>
        <label>Title</label>
        <input ng-model="vm.data.title" name="title" required>
      </md-input-container>
    </div>

    <!-- Description field -->
    <div layout="row">
      <md-input-container class="md-block" flex-gt-sm>
        <label>Description</label>
        <textarea ng-model="vm.data.description" name="descriptionField" rows="1"></textarea>
      </md-input-container>
    </div>
  </md-content>
</md-tab>

tabComponent.js

(function(angular) {
  'use strict';
angular.module('heroApp').component('tabComponent', {
  templateUrl: 'tabComponent.html',
  controller: myComponentController,
  controllerAs: 'vm',
  bindings: {
    statusChange: '&',
  }
});
})(window.angular);

function myComponentController() {
  var ctrl = this;
  ctrl.mandatoryFilesIncluded = false;
}

Answer 1

由于 save 按钮在主控制器中触发，您可以将 vm.data 定义到控制器中并将其绑定到组件：

bindings: {
  data: '=',
}

和 tab-component 将数据传递为：

 <tab-component data="vm.data"> </tab-component>

因此 vm.data 组件内部的任何更改也会反映在控制器中。

Working demo

如何在 AngularJS 1.x 中将数据从组件发送到父级

How to send data from the Component to the parent in AngularJS 1.x

javascript

angularjs

ecmascript-6

angularjs-bindings

angularjs-components