Performing a fetch request within a directive on the Ionic Framework

I am currently working on customizing the angular-pickdate module from https://github.com/jimibi/angular-pickadate to meet my specific requirements. However, I have hit a roadblock because I am unable to make a GET request in the traditional way that I am accustomed to.

Below is a snippet of my code: ...

.directive('pickadate', ['$locale', 'pickadateUtils', 'pickadateI18n', 'dateFilter', function($locale, dateUtils, i18n, dateFilter) {


  return {
    require: 'ngModel',
    scope: {
      date: '=ngModel',
      defaultDate: '=',
      minDate: '=',
      maxDate: '=',
      disabledDates: '='
    },
    template:
      ...,

    link: function(scope, element, attrs, ngModel,$http)  {

      var minDate       = scope.minDate && dateUtils.stringToDate(scope.minDate),
          maxDate       = scope.maxDate && dateUtils.stringToDate(scope.maxDate),
          disabledDates = scope.disabledDates || [],
          currentDate   = (scope.defaultDate && dateUtils.stringToDate(scope.defaultDate)) || new Date();

      scope.dayNames    = $locale.DATETIME_FORMATS['SHORTDAY'];
      scope.currentDate = currentDate;
      scope.t           = i18n.t;
      scope.render = function(initialDate,$http) {
        initialDate = new Date(initialDate.getFullYear(), initialDate.getMonth(), 1, 3);

          $http({url: 'myplace/script_lotacoes.php', method: 'GET'}).success(function(){alert("hheheh");}).error(function(){alert("oops");});

...

The error message I encounter with this code is as follows:

TypeError: undefined is not a function
at Scope.angular.module.provider.factory.directive.link.scope.render (angular-pickadate.js:122)
at angular.module.provider.factory.directive.link.ngModel.$render (angular-pickadate.js:191)
at Object.ngModelWatch (ionic.bundle.js:31576)
at Scope.$get.Scope.$digest (ionic.bundle.js:22518)
at Scope.$get.Scope.$apply (ionic.bundle.js:22789)
at done (ionic.bundle.js:17942)
at completeRequest (ionic.bundle.js:18132)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:18073)

This issue seems to be directly linked to the $http request.

If anyone has insights into why this error occurs and how it can be resolved, your assistance would be greatly appreciated! Thank you in advance.

javascriptangularjshttprequestionic-framework

Answer №1

You have included unnecessary injections of $http in both your link function and scope.render function. To streamline your code, remove these injections and only inject it into your directive.

.directive('pickadate', ['$locale', 'pickadateUtils', 'pickadateI18n', 'dateFilter', '$http', function($locale, dateUtils, i18n, dateFilter, $http) {

Answer №2

Include the $http service within the directive:

.directive('chooseadate', ['$http', '$locale', 'chooseadateUtils', 'chooseadateI18n', 'dateFilter', function($http, $locale, dateUtils, i18n, dateFilter) {

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

A helpful guide on rendering nested maps from JSON data in React.JS

I am attempting to display menu values from a JSON data. This menu has multiple levels, so I am using a nested map function to render the complete menu. const menu = { data:[ { title: "Home", child: [ { title: "SubL ...

javascriptjsonreactjslistdictionary

Aligning a lowercase "i" element within a container

Is there a more effective way to center the "i" element within this div without using specific pixel margins that adjust based on hover? Below is my code snippet: HTML: <div class="nav-collapse"> <i class="fa fa-bars fa-2x" id="bars"></ ...

javascriptjqueryhtmlcsscenter

Issue with Click event not working on dynamically added button in Angular 8

My goal is to dynamically add and remove product images when a user clicks the add or delete button on the screen. However, I am encountering an issue where the function is not being called when dynamically injecting HTML and binding the click event. Below ...

javascriptangulartypescriptdynamicangular8

The value in Angular Js ng-controller is not being populated as expected

Although this question may seem similar to one that was previously asked, I am still in need of a solution. I have recently begun learning Angular Js from scratch, and I am seeking assistance in obtaining the correct value. This is my HTML code: < ...

javascripthtmlangularjs

What steps can I take to display a download button when a file is clicked on?

As a backend developer, I usually don't delve into JavaScript tasks, but I have a simple query for JavaScript developers that I need help with. Here is my question: I am trying to display a download button when a specific file is clicked using jQuery ...

javascriptjquerynode.jsreactjs

Sending state data in an Axios POST request

I'm trying to include a state in an axios post request to send data to my backend, but I'm getting an error saying the state I selected is not defined. Here's the code snippet: React frontend import React, { Component } from "react&qu ...

javascriptreactjsexpressaxios

Determining the optimal timing to initiate a scroll once images have finished loading

When using the Quasar framework, I encountered a challenge with scrolling to a specific child element after the page has loaded. Currently, I achieve this by implementing a delay using setTimeout, but I am seeking a more reliable solution. My current appr ...

javascriptvue.jsquasar-framework

Unable to encode file data as form-data and submit it through an express endpoint

I have two main goals: first, I am looking to upload an mp3 file using the fetch function. Second, in order to accomplish this task, I believe I need to wrap the file in a form-data object. I have managed to successfully store the mp3 file in my react stat ...

javascriptreactjsexpressfetchform-data

Checking Date and Time in JavaScript

I'm struggling with validating a date time string in Javascript, based on the language set in the browser. For example, if the language is set to pt-BR, the format would be dd/MM/yyyy HH:mm:ss I attempted to use the following code: var dateFormat ...

javascriptasp.netvb.net

Ionic project initialization encounters a setback due to a dependency problem

After setting up Ionic by running npm install -g @ionic/cli I encountered an issue while trying to initialize a new project with the command ionic start ionic-test-app The initialization process failed due to an npm dependency error that mentioned a prob ...

node.jsangularionic-frameworknpm

Difficulty comprehending/implementing callback functions

After reviewing this discussion and chatting about it, I have come to understand that utilizing a callback function is the most effective approach! "Is using a callback the only solution for acquiring a link from the server via ajax, storing it in a varia ...

javascriptphpajaxxml

Single-node interaction with three.js

In this demonstration, you can observe two clickable particles that both respond to clicks. I am seeking a way to detect clicks on particles without removing them from the scene, similar to this: if (intersects.length>0){ if(intersects[0].object.ty ...

javascriptthree.js

Tips for using Chrome Dev Tools to troubleshoot JavaScript code embedded in a webpage

Currently, I am deeply involved in a project at my workplace where I am tasked with fixing tickets and debugging issues. I have reached a point where I need to understand what values the Javascript code is returning. Here's the problem I am facing: ...

javascriptjspgoogle-chrome-devtools

How can we insert data at the bottom of a table to begin with?

I am looking to add information retrieved from the iTunes API to the end of a table. The first album I receive will be placed at the very end, with each subsequent album adding on while pushing the previous one up in the hierarchy. Any ideas on how I can ...

javascriptreactjsalgorithmdatatable

Extracting HTML element from PHP string and placing it in a different page

In a PHP string, there is an HTML structure including a table within it: <html> <head> <!-- not much going on here --> </head> <body> <table border="0" align="center" cellpadding="0" cellspacing="10 ...

javascriptphpjqueryhtml

Freshening up the data source in a Bootstrap Typeahead using JavaScript

I'm trying to create a dropdown menu that displays options from an array stored in a file called companyinfo.js, which I retrieve using ajax. The dropDownList() function is called when the page loads. function dropDownList (evt) { console.log("dr ...

javascriptajaxtwitter-bootstrap

When trying to apply styles using ng-style attribute with jQuery, Angular does not seem to

Check out this plunker showcasing the issue : http://plnkr.co/edit/1ceWH9o2WNVnUUoWE6Gm Take a look at the code : var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { console.log('yeah'); ...

javascriptjqueryangularjs

Prevent certain images from loading by blocking them

I am trying to create an extension that blocks two specific images from loading. Initially, I attempted to achieve this by using the following code in the content.js file: $("#rated-image").remove(); //id of one image $(".blur-mask").remove(); //class of ...

javascriptjquerygoogle-chromegoogle-chrome-extension

Angularjs - Implement real-time text input functionality for processing as user types

Trying to create a Roman numeral calculator that converts input numbers to numerals on the fly. I have managed to link a variable to the text input, but not sure how to execute a function as the user types. Any tips on how to achieve this? Appreciate any ...

angularjs

Incorporating a CSS stylesheet into the theme settings of the Stratus 2 Beta platform

I have been attempting to personalize my Stratus 2 Beta by implementing a custom theme. I created a separate CSS file named "stratus.css" and stored it in the CSS directory of my website - with the CSS code being identical to this example. Below is my Jav ...

javascripthtmlcssthemessoundcloud-stratus