Send a data to another controller in AngularJS

Question

How I can to send array.length to another controller?

First controller: Code below

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
}

send to this function on other controller Second Controller:

They are in one page.

First Controller it is a component which release upload files.

Second controller it is a modal window where we have 2 input of text and element with first controller.

All I need it to now array.length of files which were upload in submit function on modal window. I tried with $rootScope but it didn`t help me.

Answer 1

I think what you really want to do here is to $emit or $broadcast an event. This will allow you to write less code and be able to pass this data effortlessly to anyplace in the application that you wish! Using event listeners, $on, would also provide the same effect.

Please give this article a good read to understand which option is best for your use case. https://medium.com/@shihab1511/communication-between-controllers-in-angularjs-using-broadcast-emit-and-on-6f3ff2b0239d

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

Answer 2

You could create a custom service that stores and returns the value that you need: see more information under the title 'Create Your Own Service'.

Or you could inject routeParams to the second controller: see more information

Answer 3

I came across a similar problem the other day. I would use data binding along with a $ctrl method. Here is a really good article with an example that you can replicate with your use case: http://dfsq.info/site/read/angular-components-communication Hope this helps. This form of communication makes it a lot easier to share data between two components on the same page. Article example:

Header component: input and output

.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: '&'
   }
})

So it means that header component can be used something like this

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

Main component: input

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

Parent component

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

I used the method explained above to pass data between two controllers to hide one component, when a button is clicked in a different component. The data that was being passed was a boolean. I would expect you would be able to do the same thing with array.length.