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?*
javascriptangularjsangularjs-directiveangularjs-scopeangular-ui-router

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

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

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>

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

AngularJS syntax for selecting an HTML element

Is there a specific way to write this function in AngularJS? EDIT: I'm curious to know if there is an equivalent to "$" in AngularJS. //Perform horizontal scrolling for student on button click function slideStudentLeft() { $(&a ...

angularjs

A guide on utilizing webpack devServer proxy within a create react app

Currently, I am in the process of developing a new application with create-react-app and I am looking to incorporate some proxies into my code. In the past, I utilized webpack's devServer for this purpose. module.exports = { ... devServer: { ...

javascriptreactjswebpackcreate-react-app

Creating a function that assigns an anonymous function which in turn returns another anonymous function

Can you explain the difference in JavaScript between these two code snippets? var reader = new FileReader(); reader.onload = (function (theFile) { return function (e) { loadData(e.target.result); }; })(file); reader.readAsText(file); a ...

javascript

JavaScript regular expression to switch menu

Could someone clarify the meaning of this code snippet: /expanded/.test(classes) I understand that the '/' characters indicate a regular expression and 'expanded' is a class name. However, I am unsure about what .test(classes) does ...

javascriptjqueryregextoggle

Execute a self-invoking JavaScript function with dynamic code

I'm facing a challenging problem that I just can't seem to solve... There's a function on another website that I need to use, but unfortunately, I can't modify it The code in question is: Now, I am looking to add a prototype "aaa" to ...

javascriptjquery

Error encountered in Three JS Drag Controls: Unable to assign value to property 'x' as it is undefined

I've been trying to drag the spheres around the scene using drag controls that should be activated when the "m" key is pressed. However, I keep running into an issue where the objects don't move and I receive an error message saying "Uncaught Typ ...

javascriptvue.jsthree.jsvuetify.js

Retrieving data from a <span> element within a webpage created using ReactJS

I am completely new to the world of web design and development, so there may be some mistakes in my request. Essentially, I have a webpage that contains numerous span tags like the following example: These span tags are part of a significantly large DOM t ...

javascripthtmldomreactjs

Associate text with a color from a predetermined list (JavaScript)

As I work on adding tags to my website for blog posts, I have a specific vision in mind. Each tag should be assigned a unique background color selected from a predefined array of theme colors. My goal is to assign the same background color to tags with id ...

javascriptstringtypescriptcolors

Locate a string containing a series of words separated by a character, with the last word being able to end with any combination of characters through the use of regex

Here are some words to consider: const words = ["apple", "orange", "tomato"] const str = "apple.orange.tomato.$COULD_$_BE_ANY_STRING_HERE" I am in search of a regular expression to verify the format of this string. ...

javascriptregex

Obtain a multiline match using regular expressions

Is there a way to use regex to match only multi-line strings without matching single-line strings as well? Here is the current regex I am using: Regex ('|"|`)[\s\S]*?(\1) Test string "not a match" "need to match&qu ...

javascriptregex

Tips for adding animation to a React state value change triggered by an input

In my React application, I have a form with multiple fields that each contain a text input and a range input. Currently, both inputs share the same state value and onChange function to keep them synchronized. However, I would like to add an animation effe ...

javascriptreactjsanimationreact-hooksgsap

Converting javascript html object lowercase

Is there a way to dynamically adjust the height of specific letters in my label? Right now, I am overriding the text for the elements: let element = document.getElementById('xxx') element.textContent = 'Label' I attempted using <sup ...

javascripthtmlangular

Automatically activate the Focus Filterfield in the ng-multiselect-dropdown upon clicking

I've integrated the ng-multiselect-dropdown package into my Angular project using this link: https://www.npmjs.com/package/ng-multiselect-dropdown. Everything is functioning as expected, but I'm looking to automatically focus on the filter input ...

javascripthtmlangulartypescriptng-multiselect-dropdown

Steer clear of 405 errors by implementing AJAX in combination with Flask and JINJA templ

Hey there, I'm fairly new to backend work so please bear with me. I've been doing some research but haven't found the answer yet. Currently, I'm working on an application that fetches search results from a 3rd party API. I'm tryi ...

javascriptpythonajaxflaskjinja2

Error code 12030: AJAX request status

When making an ajax XMLHttpRequest using the POST method, I am encountering a readyState of 4 with a status of 12030. It is known that 12030 is a Microsoft-specific state code indicating that the connection was not sustained. However, I have been unable to ...

javascriptajaxxmlhttprequesthttp-status-codes

Retrieve the object filtered by a specific group from an array of data

I have a data object that contains various groups and rules within each group item. My task is to filter the rules based on a search query, while also displaying the group name associated with the filtered rule. { "id": "rulesCompany", "group": [ ...

javascriptvue.jsvuejs2

Determine whether a directive possesses a specific attribute

Here is my current code snippet: <my-directive></my-directive> I am trying to include a ternary operation within it like this: {{ $scope.my-option ? 'YES' : 'NO' }} Is it possible to achieve the desired result by adding ...

javascriptangularjs

Using a toolbar to insert a hyperlink for hypertext communication

My journey with Javascript and React began this week, so I'm still getting the hang of things, especially in the front end domain. In my project, there's a link button within a toolbar. The idea is to click on it, have a text box pop up where yo ...

javascriptnode.jsreactjs

The communication between AngularJS and SignalR is experiencing issues

There seems to be a discrepancy between the functionality of jQuery and AngularJS in this scenario. While jQuery is able to return data on the client side successfully, AngularJS struggles to initiate or invoke the connection with the server. Any suggestio ...

angularjssignalr

Transforming the hide/show functionality from JQuery to Vue

I created some hide/show panels using jQuery that I want to implement in Vue. However, when I try to integrate the jQuery functions into Vue, the functionality doesn't seem to work properly. The panels are not hiding/showing as expected. Does anyone ...

javascriptjqueryvue.js