Struggling with establishing recognition of a factory within an Angular controller

I am currently facing an issue while trying to transfer data from one controller to another using a factory in Angular Seed. My problem lies in the fact that my factory is not being recognized in the project. Below is my snippet from app.js where I declare the factory:

var myApp = angular.module('myApp', ['myApp.controllers','angularFileUpload', 'ngRoute']);
//
//
myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/' ,{templateUrl:"/syncproto/partials/videoSlides.html"}, "sync").
        when('/scenarios', {templateUrl:"/syncproto/partials/scenarios.html"}, "scenariosCtrl").
        when('/scenarios/:id', {templateUrl:"/syncproto/partials/scenarios.html"}, "scenariosCtrl")
}]);

myApp.factory('Data', function() {
    var Data;
    return {
        getData: function () {
            return Data;
        },
        setData: function(value) {
            Data = value;
        }
    };
});

Below is the controller code where I am attempting to utilize the Data factory:

.controller('scenariosCtrl', ['$scope', '$http', '$location', 'Data', function($scope, $http, Data) {
        $scope.scenarios = [];
        $scope.thumbnails = [];
        $scope.init = function(){
            console.log('init hit');
            $http({ method: 'GET', url: 'http://localhost:3000/scenarios' }).
                success(function (data, status, headers, config) {
                    angular.forEach(data, function(scenario) {
                        if (scenario.video.length != 0 && scenario.video[0].thumbnailLocation != undefined){
                        $scope.thumbnails.push(scenario.video[0].thumbnailLocation);
                            $scope.scenarios.push(scenario);
                            console.log(scenario.video[0].thumbnailLocation);
                        }
                    });
                    console.log('success');
                }).
                error(function (data, status, headers, config) {
                    console.log('error');
                });
        console.log($scope.thumbnails);
        }

        $scope.showVideo = function(scenario){
            Data.setData(scenario);
            $location.path('/');
        }

    }])

The problem arises within

$scope.showVideo = function(scenario)
when calling Data.setData(scenario);, as it results in the error
TypeError: Object #<Object> has no method 'setData'

Answer №1

.controller('scenariosCtrl', ['$scope', '$http', '$location', 'Data', function($scope, $http, Data)

There seems to be a missing argument for the $location service in this code snippet. The correct syntax should include:

.controller('scenariosCtrl', ['$scope', '$http', '$location', 'Data', function($scope, $http, $location, Data)

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

Is there a way to automatically insert page numbers into every internal link on an HTML page?

When in print mode, I want to display links like this: <a href="#targetPage">link</a> but I'd prefer them to appear as: <a href="#targetPage">link (page 11)</a> (assuming the target page is on page 11 in the print preview). ...

Encountered difficulty accessing the controller ActionResult from JavaScript代码

Resolution: After thorough investigation, I successfully identified and resolved the issue. Surprisingly, it was not related to the Javascript or Controller code as initially anticipated. The root cause stemmed from a .dll file that was causing discrepanci ...

Encountering a syntax error with JSON.parse() when using MVC 4 Razor with Jquery Ajax

I am encountering an issue with my MVC 4 application login page. I am attempting to utilize a jQuery ajax request to my login controller to check if the user exists. Here is the snippet of my jQuery code: $(document).ready(function () { $("#btnSub ...

What is the process of linking a response to the correct request in a callback function?

While reading "The Node Beginner Book" by Manuel Kiesling, I stumbled upon the following code snippet located under a request handler. I'm curious about how the correct response object will be referenced when handling multiple concurrent requests: v ...

req.body is not defined or contains no data

I am facing an issue with my controllers and routers. bookController.js is functioning perfectly, but when I try to use userControllers for registration and login logic, req.body always appears empty. I tried logging the form data using console.log, but it ...

Dynamic modal in Vue JS with custom components

Within the news.twig file {% extends 'layouts.twig' %} {% block content %} <section class="ls section_padding_bottom_110"> <div id="cart" class="container"> <cart v-bind:materials=" ...

``There is an issue with getServerSideProps when wrapping it in a

When attempting to implement an auth handler function around getServersideProps, I encountered the following error message: TypeError: getServerSideProps is not a function The wrapper code in question is as follows: export async function protect(gssp) { ...

Troubleshooting: Issues with Jquery's has, find, contains functions

As I check whether an element contains another element, I've previously utilized the jquery element.has(secondElement) function. In my angularjs project, I make use of jquery within a directive where I transclude elements through markup using ng-tran ...

Utilize a Python script to transmit data to JavaScript through JSON in order to dynamically alter the content of

Currently, I am developing an interactive display that utilizes sensors on a raspberry pi. The display is set to show a webpage and I have implemented a python script to handle sensor interaction. My goal is to change the displayed web page when a user p ...

What are some techniques for reducing the number of pages in my Carousel?

I need help figuring out how to set a limit of noOfPages for the number of pages per carousel. The functions in my code below don't implement this and I'm unsure how to do it. const itemsPerPage = 6; const [page, setPage] = React.useState(1); ...

Unfortunately, I am unable to utilize historical redirection in React

When an axios request is successfully completed, I want to redirect. However, I am encountering an error that looks like this: Below is the code snippet: import React, { useState, Fragment } from "react"; import Sidebar from "../../User/Sid ...

Tips for creating a gradual fade-out effect on a bootstrap modal window

One issue I'm facing is with my modal dialog (#busyIndicator). It simply displays a message that reads "Please Wait". Sometimes, the operation it's tied to completes so quickly that the visual transition between showing and hiding the dialog beco ...

Exploring the functionality of className using materialUI

Attempting to test whether my component has a specific class is proving challenging. This difficulty stems from the fact that the class is generated using MaterialUI. For instance, I am looking for a class named spinningIconCenter, but in reality, it appea ...

Ionic: Vertical scroll bars becoming unaligned when injecting views into a splitview

After experimenting with the split view feature and exploring routing, I wanted to create a "main layout" split view and dynamically inject different views into it at runtime. You can see an example of what I'm trying to achieve in this Plunk. In my ...

Seamless Axios operations even without internet connection in Vue.js

In my Nativescript Vue.js application, there is a functionality where the user clicks on login, Axios makes a call to an endpoint to fetch a token. However, I noticed that when the emulator phone is offline, the Axios call still goes through and the &apos ...

AngularJS Project Guide for Running Breeze Queries

I need assistance creating a universal function to run a breeze query. This function must fulfill the following objectives: Check if the query has been executed before, and if so, run the query locally. Be compatible with environments like Sharepoint 201 ...

How can you temporarily delay the original ajax request until a certain condition is satisfied before proceeding?

I'm looking to set up a recaptcha process that intercepts all ajax requests before they are executed - here's how I envision the process unfolding: A user performs an action that triggers an ajax request. If the user has already completed the r ...

Conceal an element if the angular attribute does not contain any value

Currently, I am facing an issue with an image element in my project. The path for this image is being fetched from an attribute present on my angular object. However, if this imagePath attribute is empty, a broken image is displayed. I want to avoid rend ...

Similar guidelines not following suit

Within the same module are both of these directives. Primary directive: .directive('welcomeAndLog', function() { return { restrict: 'A', template: "<div ng-show=\"currentUser.get('username&a ...

AJAX: Displaying the contents of a folder. Issue with URL resolution

I'm attempting to showcase a collection of images stored in a specific folder within a div. My approach involves utilizing AJAX within a JavaScript file titled edit, which is positioned one directory away from the index route. This implementation is b ...