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 it possible for the UUIDs generated by the uuid package to be identical?

I am in need of creating unique UIDs for objects that will be stored in a database. To achieve this, I am utilizing the UUID npm package for generating unique identifiers. I have concerns regarding the possibility of duplicate IDs being generated by this p ...

Guide to incorporating a scroll-follow effect in multiple directions

I am facing a challenge with managing an array of divs that exceed the dimensions of their container. I have set overflow to hidden on the container and used JQuery Overscroll to achieve an iPhone-like scrolling effect on the map. The problem I'm try ...

Press the button to access the URL within the current window

Working with Angular, I attempted to develop a function to open a URL in the current window. However, the code below within the controller actually opens a new window: $scope.openUrl = function(url) { $window.open(url); }; ...when using ng-click=&apo ...

VueJS Components experiencing issues with displaying images

Recently, I delved into learning VueJS and successfully created a basic restaurant menu page all within a single file. Excited by my progress, I decided to refactor the project using vue-cli, but hit a snag with the images not displaying properly. The cur ...

Customize the label of the model in AngularStrap's typeahead ng-options to display something

Utilizing AngularStrap typeahead for address suggestions, I am facing an issue where I want to set the selected address object as my ng-model, but doing so causes me to lose the ability to display just one property of the object as the label. Here is an e ...

Guide to generating customized CSS styles on-the-fly in Vue (similar to Angular's dynamic styling capabilities)

When working with Angular, we have the capability to dynamically set CSS properties. For example: <style ng-if="color"> .theme-color { color: {{color}}; } .theme-background-color { background-color: {{color}}; } .theme-border-color { border-color: { ...

Angular - Automatically create thumbnails for uploaded images and videos

I am working on an Angular application that allows users to upload files. My goal is to create thumbnail images for uploaded images and videos without saving them locally. Instead, I plan to pass them along with the original file data to another API. Howev ...

We're facing some technical difficulties with the form for the school project. Furthermore, I need to ensure that the answers are

Upon inspection, it seems that the HTML code is fine, but there appears to be an issue with the JavaScript. I also need to store the answers in an array, which is a task for later. <form> <fieldset> <legend>Content:</lege ...

Having trouble with VueJS ref not preventing the default form action on submit?

Within my <script> tag, I currently have the following code: render(createElement) { return createElement("form", {ref: "formEl" , on: {submit: this.handleSubmit} }, [ <insert create form inputs here> ]); } handleSubmit(e) { ...

Is the value being used as the key for the array of objects?

Here is an array of objects: { 'data': [{ value: 1000, year: 1990 }, { value: 1001, year: 1990 }, { value: 1002, year: 1990 }, ...

Using Webpack to directly embed image paths in your code

I am working on a project that uses webpack and vue.js. I encountered an issue when trying to add an image to the vue template using src '/images/imageName.png', which resulted in a 404 error. How can I adjust the configuration to recognize absol ...

The function inArray() in jQuery will return a value of -1 when an array consists of

When using jQuery inArray, if the array contains only one element, it will return -1. var a = Array(1); console.log($.inArray(1,a)); This result is -1. However, if the array has 2 or more elements, it functions correctly. var a = Array(1,2,3); console.l ...

Tinymce editor does not display icons as expected

I am attempting to create a custom styled list that is editable with tinymce. The list-items are using Material-Check-Icons as bullet-points, which are added as css-pseudo-elements ::before. This setup works well, but when I integrate tinymce (v5) into the ...

How can I change the background color of my notification box to red if the count is not equal to zero?

When the count equals 0, I don't want any effect on the notification box. However, when the count is not equal to zero, I want the notification box to turn red. I tried implementing this, but it's not working as expected. By not working, I mean n ...

Identify whether the file is suitable for downloading via UIWebview

I am currently working on a project where I need to detect audio files (mp3, mp4, m4a, and wav) when clicking a link within a UIWebview. I have implemented the delegate call -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)re ...

Combining HashRouter and anchor navigation in React: A guide to seamless page navigation

I am currently utilizing the HashRouter functionality from the library react-router-dom. The issue I am facing is when attempting to link to a specific div on the same page using an anchor tag: <a href="#div-id"> Link to div </a> In ...

Parsing JSON data using multilevel iteration in JavaScript is a complex yet

{ "id":0, "item":[ { "id":"0-", "text":"BlueWing", "userdata":[ { "name":"cid", "content":"10377" } ], "item":[ { "id" ...

A guide to implementing accurate pagination in Vue.js 2

I'm encountering an issue while setting up pagination with Vue. My goal is to load new tasks from jsonplaceholder when the numbers on the buttons are clicked. I have managed to successfully load the first and second pages. I believe this is directly ...

Is there a simple method to submit to a URL without relying on ajax?

When it comes to using jQuery, the $.ajax() function is typically used for POST requests to a URL. However, in my particular situation, I am unable to use this function. I need the client to send a POST request to a URL and have the server redirect the use ...

Troubleshooting issues with the add-comment and remove-comment functionalities in a react-redux application

I'm working on a comment widget using react-redux. I've encountered an issue where, when I click on the add comment button, nothing happens. Also, when I try to delete a comment, I get an error saying that map is not a function even though I am p ...