Как отправить данные из Компонента родителю в AngularJS 1.x

У меня есть две вкладки в качестве компонента, который содержит некоторое поле ввода, когда я нажимаю кнопку SAVE, я хочу получить их значение и сохранить его на сервере. Проблема в том, что функция SAVE находится в index.js (родитель) и поля ввода находятся в TestComponent.js, Я не смог найти способ получить значения из компонента и отправить его в родительский контроллер (indexController.js).

Я также попытался использовать привязку, например, чтобы сохранить все данные как объект и отправить объект в 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;
}
Источник

1 ответ

Решение

Поскольку save Кнопка срабатывает в главном контроллере, вы можете определить vm.data в контроллер и привязать его к компоненту:

bindings: {
  data: '=',
}

а также tab-component передать данные как:

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

Так что любая смена vm.data Внутренний компонент также будет отражен в контроллере.

Рабочая демонстрация

Источник
Другие вопросы по тегам