The function getoffer does not exist

I am encountering an issue with my factory declaration for Malls. It seems that I am getting the error message get offer is not a function!

    .controller('confirmCtrl', function($scope,Malls,$stateParams,$log) {
        $scope.offers = Malls.getoffer($stateParams.offersId);

        console.log($scope.offers,"test");      
    })

    var offers=[{
        id:0,
        message:'Are you  sure want to buy  this coupon?'
    }, {
        id:1,
        message:'Are you  sure want to buy  this coupon?'  
    }];

    return {
        all:function(){
            return offers;
        },
        getoffer: function(offersId) {
            return _.find(offers, function(offers) {
                return offers.id == offersId;
            });
        }
    };
});

Answer №1

When setting the value for Malls in your controller's constructor, angular's dependency injection takes care of it. It is necessary to inform angular about the existence of Malls so that it can be injected into your controller.

From the provided code, it seems that Malls is just a global function. Assuming this, you can follow these steps:

<Your Module>.service('Malls', Malls);

The first parameter 'Malls' must match the parameter in your controller's constructor.

The second parameter refers to the function or constructor of your service.

To update:

// declare your service...
function Malls(){
  var offers = [{
      id:0,
      message:'Are you sure want to buy this coupon?'
    }, {
      id:1,
      message:'Are you sure want to buy this coupon?'  
    }];
  this.all = function(){
    return offers;
  };
  this.getOffer = function(id){
    var offer;
    // logic to determine the offer
    return offer;
  };
}

// add your service to your angular module...
<Your Module>.service('Malls', Malls);

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

Utilizing Bootstrap to allow for seamless text wrapping around a text input field

I am trying to implement a "fill-in-the-blank" feature using Bootstrap, where users need to enter a missing word to complete a sentence. Is there a way to align the text input horizontally and have the rest of the sentence wrap around it? This is my curr ...

PHP not displaying Bootstrap input validation message set by JS

Currently, I am attempting to implement error messages using .setCustomValidity() and the .invalid-feedback class on an HTML form utilizing Bootstrap 4. Essentially, when the user validates the form, a JavaScript script assesses the inputs and if any erro ...

The component is being updated, however the conditional statement is not functioning as expected

Having encountered an unexpected behavior in my react code, I'm seeking guidance as I am still fairly new to using react. Over the past few days, I successfully built a dashboard and now wish to implement a data page that includes CRUD transactions. ...

Error encountered due to an unfinished string constant

We encountered a glitch in our software that triggers this error message. When navigating to a specific page in our ASP.NET 2.0 application, selecting "Yes" for debugging displays the page's source code. However, there is no JavaScript present on the ...

Utilizing a feature module imported from a separate Angular4 project

I have a question about setting up an Angular 4 project. Can feature modules be loaded from another Angular 4 project? I am currently attempting to maintain separate project repositories and dynamically load feature modules into the main project. This wa ...

Function in Vue for calculating the number of duplicate elements in an array

I have successfully created a new array containing only unique values, but I am facing issues with my count function. The desired result is to display the number of items in the array for each color. The expected outcome would be: 4 red 10 blue 1 green ...

Encountering issue: LineChart is not recognized as a constructor, resulting in failure to display chart on webpage

I am struggling with displaying a chart in my HTML file that should show the details of a specific process from the past few minutes. Whenever I try to initialize the chart using google.charts.load('current', {'packages':['line&apo ...

Achieving consistent outcomes across various devices: What's the secret?

Hey there, I am facing an issue with my form page that I created using HTML, CSS, and Javascript. It looks good on my computer but appears messy on a mobile phone. The elements are getting out of the white box (div) making the entire page look chaotic. Sin ...

Chrome is blocking the loading of a local image in THREE.js due to cross-origin restrictions

While working with THREE.js, I encountered an issue in the developer console: Cross-origin image load denied by Cross-Origin Resource Sharing policy. This error only occurs when I try to run my script in Chrome. The code snippet in question is as follows ...

Sort through the JSON data and showcase it in a gridded format

I need assistance with displaying data from a JSON object in a grid based on user selections. The user should be able to select a year and make from a dropdown menu, and the corresponding data should then be filtered and displayed in a grid. For example, i ...

Angular Error: [$compile:ctreq] The specified controller 'abc' for the directive 'def' cannot be located

I have been following a tutorial and consulting the documentation, but I am still unable to figure out what mistake I am making. Every time I try, I always get errors. Here is my code: <!DOCTYPE html> <html ng-app="myApp"> <head ...

The evaluation of nested directives in AngularJS is not functioning as expected

Recently, I started delving into Angular directives (fairly new to the framework) and encountering a perplexing issue with a nested directive that is being disregarded. My directives are based on the codes of UI Bootstrap's "tabs" and "pane" directive ...

Steps to create a scrollable material-ui Modal

After setting up a Modal, I encountered an issue where the text describing my app inside the modal was overflowing, making it impossible to see the top and bottom parts. To solve this problem, I want to implement scroll functionality within the component s ...

The usage of jQuery slideUp and slideDown is resulting in a bouncing animation effect

Hey there! I've been working on a cool slide up effect for an image using jQuery's slideUp and slideDown functions. It's working well, but I've noticed that when you hover over certain areas of the div/image, the effect becomes jumpy or ...

Looking to spice up your static HTML site? Dive into the world of Ruby on

I recently developed an app that features a static HTML webpage containing text and images, and now I'm interested in incorporating Ruby on Rails to explore its capabilities further. After creating a basic RoR application, I copied the HTML content f ...

How can Ext JS 6.2 automatically expand the East panel when the West panel is triggered?

In my Ext JS v6.2 Grid application, I am faced with the task of ensuring that if the WestRegion panel is closed, the EastRegion panel should open automatically, and vice-versa. Being new to Ext JS, I initially attempted to achieve this using jQuery. Howeve ...

Initiating the "cellValueChanged" event within the bespoke renderer component of Angular AG Grid when the selection is changed

How can I trigger the "cellValueChanged" event in an Angular AG Grid custom renderer component when a select element is changed? I have been working with Angular AG Grid and a custom renderer component. My goal is to fire the (cellValueChanged)="onCellValu ...

Govern Your Gateway with Expressive Logs

I'm facing some issues with the logs in my Express Gateway: Although I followed the documentation and enabled Express Gateway logs, I cannot locate any log files under my gateway root directory. Whenever I start the gateway using the command LOG_L ...

Tab buttons that switch between different sections with just a click

Forgive me if this seems like a simple coding issue, but I struggle with javascript and need some guidance... I have a setup where two buttons (blue and yellow) toggle between different content divs. On another part of the page, there are also two buttons ...

The schema does not accept fileLink as valid

I'm currently facing an issue with implementing Simple Schema in my Meteor React project. Despite my efforts, I can't seem to make it work as expected. Below is the schema I am using: Comments.schema = new SimpleSchema({ city: { type: S ...