Issues with $mdDialog controller functionality in AngularJS Material are only occurring on certain computers

Below is the code snippet for mdDialog:

function selectAddress(addressType) {
  $mdDialog.show({
    controller: function ($scope, $mdDialog) {
      var savm = $scope;
      savm.addressType = addressType;
      savm.close = $mdDialog.hide;

      savm.foo = function () {

      };

      savm.bar = function () {

      };
    },
    template: require('../views/dialog/address-select.template.view.html'),
    parent: angular.element($window.document.body),
    clickOutsideToClose: true,
  });
}

This code is functional on two mac computers in the office, but encounters issues on other operating systems (Ubuntu and Windows) with the following error:

angular.js:14940 TypeError: invokeCtrl is not a function
   at MdCompilerService.MdCompilerProvider.MdCompilerService._createController (angular-material.js:2729)
   at Object.linkFn [as link] (angular-material.js:2689)
   at linkElement (angular-material.js:4375)
   at angular-material.js:4251
   at processQueue (angular.js:17318)
   at angular.js:17366
   at Scope.$digest (angular.js:18479)
   at Scope.$apply (angular.js:18867)
   at HTMLButtonElement.<anonymous> (angular.js:28028)
   at defaultHandlerWrapper (angular.js:3795)

All packages have the same versions across all computers:

angularjs: 1.7.0,

angularMaterial: 1.1.9,

chrome: Version 67.0.3396.99 (Official Build) (64-bit)

What could be the solution to this problem?

PS: We are using WebPack, so do not focus solely on the 'require' statement.

Answer №1

According to @mvermand, the issue lies within angularjs and has been fixed in version 1.7.2. It is recommended to update your angularjs to resolve this bug.

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

The JavaScript script to retrieve the background color is malfunctioning

I am currently working on developing a highlighting feature for an HTML table that will dynamically change the row colors on mouseover. Below is the code snippet I have been using, but it seems to be experiencing some issues. Any assistance would be greatl ...

Tips for controlling the embla carousel based on breakpoints in a React application

Trying to toggle the Embla Carousel on and off based on different breakpoints using the React version. I have attempted to initialize it for mobile and destroy it for tablet upwards, but it seems like the reinitialization is not working as expected. I su ...

Using the moment library in Angular to convert date and time can sometimes lead to errors

Whenever I attempt to convert a Gregorian date to a Persian date, the minute value in the conversion ends up becoming an error. For instance, let's say I want to convert this specific date and time to a Persian date: 2020-09-14T16:51:00+04:30 should ...

React App stalled due to continuously running function

In this section of my React app, the createBubbles function is functioning properly. However, I am encountering an issue where the entire app freezes when navigating to another page after visiting this one. The console displays the following errors and de ...

Exploring the Unpredictable Results of Recursive Functions in JavaScript

Take a look at this recursive code snippet. function calculateFactorial(n) { if (n === 0 || n === 1) { return 1; } else { console.log(calculateFactorial( (n - 1) )); return n * calculateFactorial(n - 1); } } const num = ...

Material UI Snackbar background color not able to be changed

Currently, I'm working on an ErrorHandler component in React.JS that displays a Material UI Snackbar whenever it catches an error. The issue I'm facing is trying to change the background color of the Snackbar to red, which seems to be problematic ...

Implementing JSON web tokens on the client side using Node.jsHere are the steps to implement

I have been developing a Node.js express application with JWT for authentication to secure access to my admin page. While testing my routes using Postman, everything works smoothly on the server side. However, I am facing a challenge on the client side in ...

Javascript navigation menu failing to accurately display all pages

As I continue to enhance my website at , I have encountered an issue with the menu functionality. The menu is dynamically generated through JavaScript, scanning a folder for pages and populating them into an array. While this system functions smoothly ove ...

Struggling to retrieve accurate information from JSON file in AngularJS

Having some issues with my initial AngularJS project. I am utilizing a yeoman generator and trying to fetch data from a JSON file to check the length of an array containing objects. This is contents of my data.json file: {"persons":[ { "fi ...

ReactJS Antd displays a faulty design on the webpage

Currently, I am utilizing Antd for a ReactJs project, however, I have noticed an issue with the rendering of components in the layout. Below is the code snippet: import React from 'react'; export default class Test extends React.Component { ...

AngularJS directive not registering event after model update

Within my angularjs application, I have implemented an element directive that is equipped with an event listener. This listener is designed to respond to a broadcast event from the controller. app.directive('listItem', function(){ return { ...

generate a dynamic dropdown menu using ajax to handle a vast amount of information

I have been tackling a challenge involving codeigniter and ajax. Specifically, I am working with two select boxes - one for countries and another for states. The goal is to dynamically populate the states select box based on the selected country using an a ...

What's the process for changing this arrow function into a regular function?

Hello from a child component in Vue.js. I am facing an issue while trying to pass data from the parent via sensorData. The problem lies in the fact that the arrow function used for data below is causing the binding not to occur as expected. Can anyone gu ...

Get Facebook to recognize and display link previews for websites using ajax technology

It is commonly known that when copying a link from an HTML website onto Facebook, the platform will attempt to fetch available images as previews for the link. But what happens when the content is dynamically generated, such as with JavaScript? In this c ...

How can I change the behavior of the Enter key in text fields to automatically submit the form, rather than requiring the user to

Utilizing material UI for my component library, I have a compact dialog with a "recover password" button placed within the form. However, upon adding this button, I noticed that pressing the "enter" key in the text fields triggers the onClick event of the ...

Changes to the className of a React component will trigger a re-render of

When the className of the parent changes, React children will re-render. import React from 'react'; import { useSelector } from 'react-redux'; import items from './ItemsList.js'; import Item from './Item'; import &ap ...

The issue of JQuery UI Dialog remaining open even after triggering it through an Input focus event

I am facing an issue with JQuery and JQuery UI. I thought upgrading to the latest stable version would solve it, but unfortunately, that was not the case. I am currently using Chrome. When I initiate the dialog by clicking on a specific element, everythin ...

How can you use React.js to only display "Loading..." on the page while the full name is included in the URL?

I've hit a roadblock while trying to solve this issue. Here's the situation: On the page where I need to display certain information, I intended to showcase the full name of the individual from a previous form submission. However, instead of seei ...

What is the best way to implement a series of delayed animations in jQuery that are connected

Imagine you have the following items: <div id="d1"><span>This is div1</span></div> <div id="d2"><span>This is div2</span></div> <div id="d3"><span>This is div3</sp ...

The UI grid in Angular JS is failing to refresh and display the latest content

I am currently utilizing $http.get to retrieve fresh data from the server for an angular ui grid. Whenever the date in the datepicker is altered, I trigger an ng-change event to initiate another http call for updated content. Although the call is successfu ...