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.

Phil Ninan · Accepted Answer · 2018-12-28 17:15:38Z

3

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

answered Dec 28, 2018 at 17:15

Phil Ninan

1,2081 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

amir.algazi · Accepted Answer · 2018-12-28 16:47:22Z

0

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

answered Dec 28, 2018 at 16:47

amir.algazi

1899 bronze badges

Comments

GuyWithGlasses · Accepted Answer · 2018-12-28 21:22:24Z

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.

@Makyen Thank you for your input. I am new to SO, and I realize my error. I have updated my answer with the example I was explaining regarding the link.

Collectives™ on Stack Overflow

Send a data to another controller in AngularJS

3 Answers 3

Comments

Comments

Header component: input and output

Main component: input

Parent component

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Header component: input and output

Main component: input

Parent component

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related