What is preventing the factory from gaining access to the controller?

Question

What is preventing the factory from gaining access to the controller?

I have set up a notification factory and passed it inside the controller. However, when I try to assign the factory to the scope within the controller, I am encountering an error.

alertsManager

 MyApp.factory('alertsManager', function() {
                return {
                    alerts: {},
                    addAlert: function(message, type) {
                        this.alerts[type] = this.alerts[type] || [];
                        this.alerts[type].push(message);
                    },
                    clearAlerts: function() {
                        for(var x in this.alerts) {
                            delete this.alerts[x];
                        }
                    }
                };
            });



var LoginController = function($scope, $rootScope, alerts, alertsManager)
{
    $scope.alerts = alertsManager.alerts;
    // encountering error.
    **angular.js:11594 TypeError: Cannot read property 'alerts' of undefined**
}

LoginController.$inject = ['$scope', '$rootScope', 'alerts', 'alertsManager'];


**Why is the factory not accessible inside the controller?*

javascript angularjs angularjs-directive angularjs-scope angular-ui-router

Answer 1

Answer №1

Consider the code snippet provided below.

code:

var myApplication = angular.module('myApp', []);

myApplication.factory('notificationsManager', function() {
  return {
    notifications: {'notification':"I am from the factory service"},
    addNotification: function() { //code },
    clearNotifications: function() { //code }
  }
});

myApplication.controller('MyCtrl',['$scope','notificationsManager', function($scope, notificationsManager) {
  $scope.message = notificationsManager.notifications.notification;
}]);

Note : Remember to Inject the factory service into the Controller

To view a working demo, click here .

Answer 2

Consider the code snippet provided below.

code:

var myApplication = angular.module('myApp', []);

myApplication.factory('notificationsManager', function() {
  return {
    notifications: {'notification':"I am from the factory service"},
    addNotification: function() { //code },
    clearNotifications: function() { //code }
  }
});

myApplication.controller('MyCtrl',['$scope','notificationsManager', function($scope, notificationsManager) {
  $scope.message = notificationsManager.notifications.notification;
}]);

Note : Remember to Inject the factory service into the Controller

To view a working demo, click here .

Answer 3

Answer №2

There is no requirement to include 'notifications' as a parameter in the controller.

Answer 4

There is no requirement to include 'notifications' as a parameter in the controller.

Answer 5

Answer №3

Forgive me for asking a rather foolish question, but have you double-checked to see if these files are actually included in your Index.html file?

It should look something like this:

 <script src="app/services/alertsManager.js"></script>

Answer 6

Forgive me for asking a rather foolish question, but have you double-checked to see if these files are actually included in your Index.html file?

It should look something like this:

 <script src="app/services/alertsManager.js"></script>

What is preventing the factory from gaining access to the controller?

Answer №1

Answer №2

Answer №3

Similar questions

Efficiently update a multi-step form using Ajax and jQuery by adding new content without needing to reload the

The function window.open when using the target '_blank' will launch a fresh browser window

Require assistance with understanding the aes-256-cbc encryption using oaepHash

When working with an Angular application, IE9 may display the error message: "An internal error occurred in the Microsoft Internet extensions"

Merge information from various sources using ajax

The jQuery code is failing to affect a form that has been dynamically inserted into the DOM using AJAX

Non-responsive Click Event on Dynamically Created Div Class

Struggling to retrieve an element from an object received through a get request in Express

What is the best way to remove a specific item from a list of maps in DynamoDB based on a particular attribute value within the

An error occurred during runtime due to a TypeError when trying to execute the 'setItem' function on 'Storage'. The error message indicates that 2 arguments are required for this function, but only 1 argument

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

Update the date on the AngularJS datepicker to today's date

"Developing a JSON object from a Form: A Step-by-

Icons are failing to display in the dropdown menu of MUI after an option is selected in ReactJS

Store the encoded data in a variable

A configuration for ".node" files is missing: specifically, the loader for node_modules/fsevents/fsevents.node in a project using Vite

What makes Angular date pickers sluggish?

Adjust the text color of a div element by clicking a button with the help of JavaScript

Refreshing data from firebase on each route change

Leverage Angular's constant feature in scenarios that extend beyond the