Send one controller value to another in angularjs with different views

Question

i am building an Mobile App using ONSEN UI. I am using angularjs as supporting JavaScript framework.

Here is how i have 2 views in a single page template.

<ons-template id="categories.html">
    <ons-page ng-controller="directoryControl">
      <ons-toolbar>
        <div class="center">Directory Category List</div>
      </ons-toolbar>
      <ons-list>
        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostCategory in PostCategories">

          <ons-row ng-click="setCurrentCategory(PostCategory.slug); menu.setMainPage('directory-page.html')">
            <ons-col>
              <div class="name">
                {{PostCategory.title}}
              </div>
            </ons-col>
            <ons-col width="40px"></ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>


<!-- when i click on any row (List Item) -->


  <ons-template id="directory-page.html">
    <ons-page ng-controller="directoryCategoryListing">
      <ons-toolbar>
        <div class="center">Directory List</div>
      </ons-toolbar>
      <p style="text-align: center" ng-show="spinner">
          <ons-icon icon="spinner" class="spinner center" size="40px" spin="true"  fixed-width="true" ></ons-icon>
      </p>
      <ons-list>
        <ons-list-item modifier="chevron" class="list-item-container">
          <ons-row>
            <ons-col width="95px">
              <img src="images/location1.png" class="thumbnail">
            </ons-col>
            <ons-col>
              <div class="name">
                Some Title
              </div>

              <div class="desc">
                Some Description
              </div>
            </ons-col>
            <ons-col width="40px"></ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>

So here is my controllers looks like:

var module = angular.module('app', ['onsen']);

module.controller('directoryControl', function($scope, $http) {
ons.ready(function() {

                $scope.spinner = true;
                $scope.CurrentCategory = null;
                //some other code in between
                $scope.setCurrentCategory = function(categoryName){
                       $scope.CurrentCategory = categoryName;
                       console.log($scope.CurrentCategory);
                }

    });
});

/* Second CONTROLLER WHERE I WANT $scope.CurrentCategory value */

module.controller('directoryCategoryListing', function($scope, $http) {
ons.ready(function() {
                console.log($scope.CurrentCategory);
    });
});

I can get the value of clicked row(list item) in the first controller. But couldn't take it to second one. Is there any way i can do that?

The template structure is one page style. http://codepen.io/anon/pen/wavYzY for reference

Thank you! (In advance)

possible duplicate of [Passing data between controllers in Angular JS?](http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js) — Julien, Apr 23 '15 at 19:14
What I have noticed. If you load a new html page (not a partial) it does not work. It will reset your controllers values. Every HTML page get's it's own instance of the controller. I had a similar question a while ago, but it remained unanswered ->http://stackoverflow.com/questions/28182967/two-controllers-different-html-pages-using-same-factory-in-angularjs-but-array. I solved it differently though. — Michelangelo, Apr 23 '15 at 19:19
Hello, actually from the selection of row (list item) i just want to get all the corresponding values. So i am trying to get the "slug" here so i can use json api to fetch the data from my wordpress website related to that category slug. So any other option available here? — user3201500, Apr 23 '15 at 19:22

Mukund Kumar · Accepted Answer · 2015-04-23T21:06:49.333

0

Use $rootScope to communicate between controller.see codepen

use this code:

$scope.setCurrentCategory = function(categoryName){
       $scope.CurrentCategory = categoryName;
       console.log($scope.CurrentCategory);
       $rootScope.CurrentCategory=$scope.CurrentCategory;
 }

and replace 2nd controller code with this:

 module.controller('directoryCategoryListing', function($scope, $http) {
    ons.ready(function() {
                    console.log($rootScope.CurrentCategory);//it will log 

        });
    });

edited Apr 23 '15 at 21:06

answered Apr 23 '15 at 19:24

Mukund Kumar

21,413
18
59
79

What is $rootScope here. I am getting an error on rootScope. error is as ReferenceError: $rootScope is not defined – user3201500 Apr 23 '15 at 19:30
ADD $rootScope as a dependencies in first and second controller – Mukund Kumar Apr 23 '15 at 19:36
1

more common and less expensive to just use a shared service – charlietfl Apr 23 '15 at 19:37
Ok. I try to add the dependency like this module.controller('directoryControl', function($scope, $http, $rootScope) in both the controller. But it seems like not working. – user3201500 Apr 23 '15 at 19:39
http://codepen.io/anon/pen/wavYzY here is the codepen. You can try it here. You will get the complete idea. – user3201500 Apr 23 '15 at 20:11
In the side menu there is an option for "Directory" – user3201500 Apr 23 '15 at 20:14
i don't eknow why event is not working. i am modifing post for alternative solution. – Mukund Kumar Apr 23 '15 at 21:03

Send one controller value to another in angularjs with different views

1 Answers1