如何將數據從組件發送到AngularJS 1.x中的父代

我有兩個選項卡作爲組件，其中包含一些輸入字段，當我按下SAVE按鈕時我想獲取它們的值並保存它到服務器。問題是SAVE功能在index.js（父）和輸入字段在TestComponent.js。我無法找到從組件獲取值並將其發送到父控制器（indexController.js）的方式。如何將數據從組件發送到AngularJS 1.x中的父代

我也嘗試使用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; 
}

來源

2017-07-31 GeoCom

更好地貼在這裏的相關代碼，除了鏈接。 –

您可以從您的子組件廣播一個事件，並且您的父組件會監聽它，https://stackoverflow.com/questions/35526318/efficient-way-to-communicate-components-or-directives-in-angular-1 -x這個鏈接可能對你有幫助。 – sivaram636

由於主控制器save觸發按鈕，可以定義成vm.data控制器，並將其綁定到組件：

bindings: { 
    data: '=', 
}

和tab-component通數據爲：

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

所以任何變化的vm.data裏面的組件都會反映在contr奧勒也是。

Working demo

來源

2017-07-31 08:47:19

如何將數據從組件發送到AngularJS 1.x中的父代

回答

相關問題