将数据发送到AngularJS中的另一个控制器

时间:2018-12-28 16:31:41

标签: angularjs

如何将array.lengh发送到另一个控制器。 第一控制者:鳕鱼波纹管

                function uploader_OnAfterAddingFile(item) {

                    var doc = {item: {file: item.file}};

                    if (doc.item.file.size > 10240) {
                        doc.item.file.sizeShort = (Math.round((doc.item.file.size / 1024 / 1024) * 100) / 100) + 'MB';
                    } else {
                        doc.item.file.sizeShort = (Math.round((doc.item.file.size / 1024) * 100) / 100) + 'KB';
                    }
                    doc.item.showCancel = true;

                    if ($scope.documentStatus) {
                        item.formData.push({status: $scope.documentStatus});
                    }
                    if ($scope.tenderDraftId) {
                        item.formData.push({tenderDraftId: $scope.tenderDraftId});
                    }

                    item.getDoc = function () { return doc; };
                    doc.item.getUploadItem = function () { return item; };

                    $scope.documents.push(doc);

                    //I need send $scope.documents.length
                }

发送到其他控制器上的此功能 第二个控制器:

http://prntscr.com/m0oc5h

它们在一页中。

第一个控制器,它是用于重新上传文件的组件。

第二个控制器,它是一个模态窗口,在这里,我们有2个文本输入和第一个控制器的elemt。

所有我现在需要的文件,其中array.lengh个文件已上传到模态窗口中的提交功能中。我尝试使用$ rootScope,但并没有帮助我。

3 个答案:

答案 0 :(得分:2)

我认为您真正想在这里做的是$emit$broadcast一个活动。这将使您编写更少的代码,并且能够轻松地将此数据传递到所需的应用程序中的任何位置!使用事件侦听器$on也可以提供相同的效果。

请仔细阅读本文,以了解哪种选择最适合您的用例。 https://medium.com/@shihab1511/communication-between-controllers-in-angularjs-using-broadcast-emit-and-on-6f3ff2b0239d

TLDR: $rootScope.$broadcast vs. $scope.$emit

答案 1 :(得分:0)

您可以创建一个定制服务来存储并返回所需的值: see more information,标题为“创建自己的服务”。

或者您可以将routeParams注入第二个控制器:see more information

答案 2 :(得分:0)

前几天,我遇到了类似的问题。我将使用数据绑定以及$ ctrl方法。这是一篇非常不错的文章,上面有一个示例,您可以将其与用例一起复制:http://dfsq.info/site/read/angular-components-communication希望这会有所帮助。这种通信形式使在同一页面上的两个组件之间共享数据变得容易得多。文章示例:

标题组件:输入和输出

.component('headerComponent', {
   template: `
      <h3>Header component</h3>
      <a ng-class="{'btn-primary': $ctrl.view === 'list'}" ng-click="$ctrl.setView('list')">List</a>
      <a ng-class="{'btn-primary': $ctrl.view === 'table'}" ng-click="$ctrl.setView('table')">Table</a>
   `,
   controller: function( ) {
      this.setView = function(view) {
         this.view = view
         this.onViewChange({$event: {view: view}})
      }
   },
   bindings: {
      view: '<',
      onViewChange: '&'
   }
})

因此,这意味着可以使用标头组件

<header-component view="root.view" on-view-change="root.view = $event.view"></header-component>

主要组成部分:输入

.component('mainComponent', {
   template: `
      <h4>Main component</h4>
      Main view: {{ $ctrl.view }}
  `,
  bindings: {
     view: '<'
  }
})

父项

<header-component view="root.view" on-view-change="root.view = $event.view"></header-component>
<main-component view="root.view"></main-component>

当在另一个组件中单击按钮时,我使用上述方法在两个控制器之间传递数据以隐藏一个组件。传递的数据是布尔值。我希望您能够对array.length进行相同的操作。