Error: The function $rootScope.$on is not defined within the Connectivity Factory

I am facing an issue with my Ionic app while trying to run it in offline mode. The error message "services.js:392 Uncaught TypeError: $rootScope.$on is not a function" appears when I launch the app. Can someone please explain why this is happening and what steps I should take next?

I specifically require the offline mode feature to be functional in order to submit my app to the store. One of the key functionalities that need to be disabled in offline mode is the Google Maps location dropdown.

})*/
  .factory('ConnectivityMonitor', ['$ionicPopup', function($rootScope, $cordovaNetwork, $ionicPopup){

    return {
      isOnline: function(){
        if(ionic.Platform.isWebView()){
          return $cordovaNetwork.isOnline();
        } else {
          return navigator.onLine;
        }
      },
      isOffline: function(){
        if(ionic.Platform.isWebView()){
          return !$cordovaNetwork.isOnline();
        } else {
          return !navigator.onLine;
        }
      },
      startWatching: function(){
        if(ionic.Platform.isWebView()){

          $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
            console.log("Device is online");
          });

          $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
            console.log("Device is offline");
            $ionicPopup.alert({
              title: 'No Internet Connection',
              content: 'This app requires an internet connection.'
            })
              .then(function() {
                //ionic.Platform.exitApp();
              });
          });

        }
        else {
...
        }
      }
    }
  }])

Answer №1

.factory('ConnectivityMonitor', ['$ionicPopup', function($rootScope, $cordovaNetwork, $ionicPopup){

You have assigned $ionicPopup to be equal to $rootScope.

Include all dependencies as strings in arrays or use a function declaration, like so:

.factory("ConnectivityMonitor", ["$rootScope","$cordovaNetwork", "$ionicPopup", function($rootScope,$cordovaNetwork, $ionicPopup){...}]);

or

.factory("ConnectivityMonitor", function($rootScope,$cordovaNetwork, $ionicPopup));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the possible reasons for a checkbox not being checked in React JS?

I've been working with react final form and I'm encountering an issue where I can't seem to get the checkbox to be properly checked. I'm not sure what mistake I might be making. Take a look at my code on CodeSandbox const AppWithIconTo ...

Is it necessary to re-export a module after modifying an attribute in it in JS/ES6?

From my understanding of the module system, when I use import 'some_module' in a file, I will always receive the same instance of that module and not a new instance each time. However, I am a bit puzzled by a pattern I have observed in certain a ...

Content not appearing in ng repeat loop

I'm facing a basic issue that I can't seem to solve - my code isn't working as expected: <article id="desktop"> <h3>Content: </h3> <ul> <li ng-repeat="x in storage"> name: {{x.name}} ...

What is the best way to manage the "open link in a new tab" action?

I am currently working on a project that involves displaying a series of resources on a web page. Each resource is stored as a record in a database with two fields: "url" and "visited." One issue I have encountered is that when a user clicks on a resource ...

Create a customized menu with jQuery that disappears when hovered over

Check out this menu I've created: http://jsbin.com/useqa4/3 The hover effect seems to be working fine, but I'm looking to hide the div #submenuSolutions when the user's cursor is not on the "Solution" item or the submenu. Is there a way to ...

What is the process for defining an outcome when a draggable element is placed into a droppable area using Jquery?

Currently, I am working on a task where I need to increase the value of a counter (var counter = 0;) every time a draggable image is dropped into a dropzone, which is also an image rather than a div. $( "#goldbag" ).draggable({ revert: "invalid", containm ...

Getting the highest level object in a nested Angular component structure

Currently, I am in the process of developing a query builder using Angular that bears resemblance to the JQuery builder. However, I have encountered an issue related to emitting the data. Whenever I click on the addGroup or addRule buttons, a new group is ...

Validate that a string is a correct file name and path in Angular without using regular expressions

Currently, I am using regex to determine if a string is a valid file name and path. However, when the string length becomes longer, it ends up consuming a significant amount of CPU, resulting in browser performance issues. public static readonly INVALID_F ...

How can I pass a specific value, rather than the entire array, in a ReactJS dropdown menu?

I am facing a problem where the entire array is being passed as an argument when I call onchange after getting correct values in the dropdown. Instead of only receiving the selected value, e contains the whole array. Here is the code snippet that demonst ...

Error encountered when attempting to reinitialize DataTable while iterating through multiple tables and searching within tabs

Currently, I am utilizing DataTable to display 3 separate tables with the help of tabs, along with a search function. However, every time I load the page, I encounter a reinitialization error. Here is the snippet of my code: _datatables.forEa ...

Angular: Leveraging $http within a service

I've developed an angular Provider that exposes a getSession method which needs to be resolved before entering a specific route: var serviceId = 'session'; angular.module("app").provider(serviceId, sessionProvider); function sessionProvid ...

The reflow feature in Highcharts does not properly update the width of the container for High

https://i.sstatic.net/8Shix.gif I am currently working on adjusting the width of Highcharts dynamically to fit its parent container. To achieve this, I have set up a mechanism that listens to changes in the sidebar state and triggers a reflow function whe ...

Extract particular elements from an array and transform them into a new array

Presented below is an array: [{ "title": "Apple iPhone 7 Plus 32 GB", "category": "phone", "brand": "apple", "condition": "Used", "price": 800, "id": 0, "description": "Apple" }, { "title": "Apple Ipad Air 32 GB", "category": "tablet", "brand ...

Is it possible to implement the same technique across various child controllers in AngularJS?

I am trying to execute a function in a specific child controller. The function has the same name across all child controllers. My question is how can I call this function from a particular controller? Parent Controller: app.controller("parentctrl",functi ...

Error: Unable to access the 'offsetTop' property of null

I attempted to implement a scroll effect in my project. The goal was for users to be taken to a specific section when they clicked on an option in the navbar. However, I encountered an error during implementation. Below is the code snippet where the error ...

Display or conceal a div depending on the selected radio button

I am attempting to display a hidden div based on the input of a radio button. If the "yes" option is checked, the hidden div should be shown. Conversely, if the "no" option is checked, the div should be hidden. I'm not sure why this code isn't w ...

Issues with appending new rows using JavaScript

I'm facing an issue with adding rows to the table using this code and I can't seem to find a solution. function add() { document.getElementById("popup").style.display = "block"; document.getElementById("add").addEventListener("click", func ...

mdDialog showcasing beautiful JSON in a modal

I am trying to display formatted JSON in an Angular mdModal. Below is the code I am using: testVm.showPopup = function(id, data, ev) { var jsonPrettified = JSON.stringify(JSON.parse(data), null, 2); $mdDialog.show({ ...

How can I show a legend entry for every column in Amcharts?

Take a look at this code snippet: http://jsfiddle.net/ouLed1fp/ How can I create a legend entry for each column in the chart? Also, is there a way to display the column names next to them, providing a clear legend? <div id="chartdiv" style="width: 10 ...

What could be causing certain javascript functions to not work properly?

Currently, I am using JavaScript and AJAX to validate a registration form. The functions restrict(elem) and checkusername() are both working as intended. When the AJAX passes the checkusername variable to PHP, it checks if the username exists and displays ...