Sharing information between controllers in OnsenUI using AngularJS and PhoneGap

Question

Sharing information between controllers in OnsenUI using AngularJS and PhoneGap

I've encountered similar questions to mine that have been addressed, but I believe my scenario is unique. I began with the sample code available on this page for a basic app featuring a sliding menu integrated with Google Maps.

My current project involves creating a prototype allowing users to submit new items, which are then added to a list of pending submissions and displayed on the map. Currently, I am focused on enabling users to create items and automatically updating the list of pending submissions. I have implemented a simple form for creating new items:

<ons-page>
    <ons-toolbar fixed-style ng-controller="SlidingMenuController">
        <div class="left">
            <ons-toolbar-button ng-click="slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
        </div>
        <div class="center">New Submission</div>
    </ons-toolbar>
    <ons-row style="margin-top: 10px; text-align: center;">
        <ons-col ng-controller="NewSubmissionController">
            <p style="font-size: 12px;">Please provide a brief description and material details of your find.</p>
             <textarea style="width: 97%;" id="subDescrText" class="textarea" rows="4" placeholder="Type your description here..." value="" ng-model="subDescription"></textarea>
        <ons-button style="margin-top: 24px;" ng-click="doStore()">
            Store
        </ons-button>
        </ons-col>
    </ons-row>
</ons-page>

Another page has been set up to display the created submissions:

<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-toolbar-button ng-click="slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
        </div>
        <div class="center">Pending Submissions</div>
    </ons-toolbar>
    <div style="text-align: center;">
        <ons-list id="pendingList" var="aPendingList" ng-controller="PendingListController">
            <ons-list-item ng-repeat="pi in pendingItems">
                <p>{{pi.description}}</p>
                <span>{{pi.material}}</span>
            </ons-list-item>
        </ons-list>
    </div>
    <p style="margin-top: 12px; text-align: center; width: 100%;" >
        <ons-button ng-click="">
            Upload All
        </ons-button>
    </p>
</ons-page>

The necessary controllers have also been added:

app.controller('NewSubmissionController', function($scope) {
    $scope.selMat;
    $scope.subDescription;

    $scope.doStore = function() {
        alert('In NewSubmissionController.doStore() - Selected material: ' + $scope.selMat + '\nDescription: ' + $scope.subDescription);

        var newPI = new SubmissionItem($scope.selMat, $scope.subDescription, '');
        $scope.$emit('newPI', newPI);
        slidingMenu.setMainPage('pendingList.html', {closeMenu: true});
    };

});

// Controller for Pending List
app.controller('PendingListController', function($scope) {
    $scope.pendingItems = [];
    $scope.$on('newSubEvent', function(e, subMat, descr) {
        alert('In PendingListController, event newSubEvent - Submitted material: ' + subMat + '\nDescription: ' + descr);
    });

    $scope.addPendingItem = function(newPi) {
        alert('In PendingListController.addPendingItem() - ' + newPi);
        $scope.pendingItems.unshift(newPi);
        // Code to update the list of pending submissions...
    };
});

In my attempt to utilize the event system based on suggestions, it appears ineffective as the two controllers are not linked hierarchically. Even placing PendingListController within NewSubmissionController proved futile likely due to both being part of separate views.

What would be the most efficient solution to trigger PendingListController.addPendingItem() from NewSubmissionController?

javascript angularjs cordova onsen-ui

Answer 1

Answer №1

When working with multiple pages and requiring the management of different pages, it is recommended to implement the Multiple Pages Managing Pattern. This involves adding a main controller for the main navigation page, such as a sliding menu page, to enable sharing of $rootScope among child controllers.

One effective solution is to utilize Dependency Injection, where you can use services or factories to facilitate the passing and sharing of data between controllers.

The demonstration code below illustrates:

How to utilize a service for communication between controllers
How $rootScope can be used for live updating of data

Implementing a service to facilitate data sharing between controllers:

angular.module('app', [])
  .service('mainService', function($http) {
    var self = this;
    self.userList = [];

    self.login = function(newUser) {
      self.userList.push(newUser + ' ' + (self.userList.length + 1));
      return self.userList;
    };
  })

.controller('MainCtrl', function($rootScope, $scope, mainService) {

  $scope.mainAddUser = function() {
    $rootScope.users = mainService.login('Main');
  };
})

.controller('LoginCtrl', function($rootScope, $scope, mainService) {
  $scope.loginAddUser = function() {
    $rootScope.users = mainService.login('Login');
  };
});

For a live demo, visit http://plnkr.co/edit/OvG0oj6EmDU5GMi1eBaU?p=preview

Answer 2

When working with multiple pages and requiring the management of different pages, it is recommended to implement the Multiple Pages Managing Pattern. This involves adding a main controller for the main navigation page, such as a sliding menu page, to enable sharing of $rootScope among child controllers.

One effective solution is to utilize Dependency Injection, where you can use services or factories to facilitate the passing and sharing of data between controllers.

The demonstration code below illustrates:

How to utilize a service for communication between controllers
How $rootScope can be used for live updating of data

Implementing a service to facilitate data sharing between controllers:

angular.module('app', [])
  .service('mainService', function($http) {
    var self = this;
    self.userList = [];

    self.login = function(newUser) {
      self.userList.push(newUser + ' ' + (self.userList.length + 1));
      return self.userList;
    };
  })

.controller('MainCtrl', function($rootScope, $scope, mainService) {

  $scope.mainAddUser = function() {
    $rootScope.users = mainService.login('Main');
  };
})

.controller('LoginCtrl', function($rootScope, $scope, mainService) {
  $scope.loginAddUser = function() {
    $rootScope.users = mainService.login('Login');
  };
});

For a live demo, visit http://plnkr.co/edit/OvG0oj6EmDU5GMi1eBaU?p=preview

Answer 3

Answer №2

To effectively communicate and handle events between controllers that do not share the same $scope, utilize $rootScope along with its functions $on and $broadcast:

myApp.controller("fooCtrl", function($scope, $rootScope){
        $scope.foo = "foo";

        $scope.broadcast = function() {
            $rootScope.$broadcast("fooChange", $scope.foo);
        };
});

myApp.controller("barCtrl", function($scope, $rootScope){
        $scope.bar = null;

        $rootScope.$on("fooChange", function(e, data){
            $scope.bar = data;
        });
});

Upon capturing the event in barCtrl, you can execute the

PendingListController.addPendingItem()

method.

Check out the DEMO at http://jsbin.com/kolorixoti/1/edit?html,js,output

Answer 4

To effectively communicate and handle events between controllers that do not share the same $scope, utilize $rootScope along with its functions $on and $broadcast:

myApp.controller("fooCtrl", function($scope, $rootScope){
        $scope.foo = "foo";

        $scope.broadcast = function() {
            $rootScope.$broadcast("fooChange", $scope.foo);
        };
});

myApp.controller("barCtrl", function($scope, $rootScope){
        $scope.bar = null;

        $rootScope.$on("fooChange", function(e, data){
            $scope.bar = data;
        });
});

Upon capturing the event in barCtrl, you can execute the

PendingListController.addPendingItem()

method.

Check out the DEMO at http://jsbin.com/kolorixoti/1/edit?html,js,output

Sharing information between controllers in OnsenUI using AngularJS and PhoneGap

Answer №1

Answer №2

Similar questions

Trigger the activation of an input field upon clicking an image labeled "edit"

Ways to retrieve a variable from outside of a function

Having trouble redirecting to the Google login screen with Passport Google Auth 2.0

Changing VueJS duplicate values with v-model (:value, @input)

Enhancing your JQuery Select2 plugin by incorporating a Checkbox feature

Error encountered with React Hooks - TypeError

Loading static assets in Express.js

The system does not acknowledge "ENVIRONMENT" as a command that can be executed either internally or externally, or as a batch file that can be

Ensure that PHP form validations are checked when submitting the form using jQuery

Generate a variety of requests with Axios

Jump to Anchor when Page Reloads

Angular 1.x just got a major upgrade with the introduction of the UI-Router v1.0+ $trans

Getting a portion of a href link in Java using Selenium

What is the best way to save a scheduled cron reference in a database in order to deactivate it at a later time in a

Utilizing React and MobX to dynamically render components based on observable arrays

What is the best way to enforce a required selection from one of the toggle buttons in a React form?

Problems arise when a controller within an ng-repeat needs to pass data to another controller, based on the specific ng-repeat element that was clicked

What are the steps to showcase a randomly generated number in a live Flot chart using Json?

The information does not display in the AngularJS-generated table

Using nodeJS to showcase content on a web page