Unique issue: Angular encountering a syntax error exclusively in Internet Explorer browser

Encountered an issue with a JavaScript code snippet within my angular project. It throws a syntax error in IE 11, but runs smoothly in Chrome. Interestingly, this particular function is not even called on the initial page load, yet the error persists.

Upon commenting out the problematic section, the page loads without any issues.

The error seems to be centered around the .then line, which is confusing me as to why it's causing trouble.

$scope.showNewTeamDialog = function (ev) {
    $mdDialog.show({
        controller: NewTeamDialogController,
        templateUrl: 'NewTeam.html',
        locals: { newTeamName: $scope.newTeamName },
        parent: angular.element(document.body),
        targetEvent: ev
    }).then((newTeamName) => {
        if (newTeamName !== undefined) {
            $scope.newTeamName = newTeamName.newTeamName;
            $scope.createNewTeam();
        }
    });
};

Answer №1

In order to make your code compatible with Internet Explorer, you will need to make some modifications.

$scope.showNewTeamDialog = function (ev) {
        $mdDialog.show({
            controller: NewTeamDialogController,
            templateUrl: 'NewTeam.html',
            locals: { newTeamName: $scope.newTeamName },
            parent: angular.element(document.body),
            targetEvent: ev
        }).then(function(newTeamName){
            if (newTeamName != undefined) {
                $scope.newTeamName = newTeamName.newTeamName;
                $scope.createNewTeam();
            }
        }.bind(this);
    };

It's important to note that the arrow syntax you have used is not supported by IE. Please use function syntax instead for compatibility.

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

Guiding the user to a different React page after a successful login: a simple solution

Currently, I am working on developing my very first full-stack application with React for front-end and Node.js with Express for back-end. I have set up a /login route using react router dom where users can input their email and password ...

Error: Unable to access the 'login' property of an undefined object

An error occurred: Uncaught TypeError: Cannot read property 'login' of undefined........... import Login from '../components/Login.jsx'; import { useDeps, composeWithTracker, composeAll } from 'mantra-core'; export const com ...

What is the best way to display an HTML file in Express when utilizing React as the frontend?

As a newcomer to the world of web development, I'm facing a seemingly simple issue that is consuming much of my time. I have set up an express server to run React on the front end. To achieve this, I use webpack and bundle to parse my react app, and ...

Implementing a dialog box pop-up from a separate React file

My journey with React is just beginning, so forgive me if this question seems basic. I have a delete icon in one of my files, and when it's clicked, I want to display a confirmation dialog box. I found an example on the official Material-UI website: h ...

Using JQuery to make a GET request and receive a JSON response, then selecting particular objects

I am in the process of developing a straightforward web application. The concept involves users inputting a license plate number, which will then connect to an OpenData API based on Socrata that houses information about all registered vehicles in my countr ...

Angular 2: Applying class to td element when clicked

I am working with a table structured like this <table> <tbody> <tr *ngFor="let row of createRange(seats.theatreDimension.rowNum)"> <td [ngClass]="{'reserved': isReserved(row, seat)}" id={{row}}_{{sea ...

What is the best way to update only a portion of a nested schema in mongoose?

UPDATE: Through numerous trials, I finally discovered a successful method that converts any object into a format that mongoose can interpret. Take a look at the solution provided here: const updateNestedObjectParser = (nestedUpdateObject) => { cons ...

Tips for extracting certain characters from a URL and saving them as an ID using JavaScript

Consider this scenario where I have a specific URL: http://localhost:3000/legone/survey/surveyform/form11/03141800300000030001 In order to achieve the desired outcome, I aim to extract and store different parts of the URL into designated IDs. Specificall ...

Unit testing setTimeout in a process.on callback using Jest in NodeJS

I've been struggling with unit testing a timer using Jest within my process.on('SIGTERM') callback, but it doesn't seem to be triggered. I have implemented jest.useFakeTimers() and while it does mock the setTimeout call to some extent, ...

Tips for combining HTML and JavaScript on a WordPress site

As a WordPress developer who is still learning the ropes, I have come across a challenge with embedding html and JavaScript onto a page. Currently, I am in the process of redesigning a company website and one of the tasks involves integrating a calculator ...

What is the best way to retrieve the js window object within emscripten's EM_JS function?

I'm looking to access the window.location in an EM_JS method in order to call a JavaScript method from C++. My attempted approach was: EM_JS(const char*, getlocation, (), { let location = window.location; let length = lengthBytesUTF8(location ...

Show a table with rows that display an array from a JSON object using JavaScript

My current code includes JSON data that I need to display in table rows, but I'm struggling to understand how to do so effectively. The output I am currently seeing is all the rows from the array stacked in one row instead of five separate rows as in ...

Is it possible to transfer a value when navigating to the next component using this.props.history.push("/next Component")?

Is there a way I can pass the Task_id to the ShowRecommendation.js component? recommend = Task_id => { this.props.history.push("/ShowRecommendation"); }; Any suggestions on how to achieve this? ...

Encountered issue while initializing object from controller in AngularJS

Here is the demonstration on how the fiddle appears: var app = angular.module('testApp', []); app.controller = angular.('testAppCtrl', function ($scope) { $scope.vehicle = { type: 'car', color: 're ...

What is the optimal parameter order when utilizing pre-curried functions and composition in JavaScript?

We have a simple, mathematically curried function for subtracting numbers: function sub(x) { return function (y) { return x - y; }; }; sub(3)(2); // 1 The function signature matches the obtained result. However, when function composition comes i ...

Transfer the value of a JavaScript variable to a PHP variable

var javascript_data = $("#ctl00").text(); <?php $php_variable = ?> document.write(javascript_data); <? ; ?> Is there a way to transfer the javascript_data into the php_variable? I'm encountering an issue with this code. Any suggestions? ...

Learn the step-by-step process of dynamically adding elements to a JavaScript object in JSON structure

We are attempting to dynamically generate a JSON object using a for loop. The intended result should resemble the following: posJSON = [ { "position": [msg[0].Longitude, msg[0].Latitude], "radius": 0.05, "color": [255, 255, 0, ...

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

I've hit a roadblock with my Chrome Extension development. Despite using two different methods to add keyboard functionality, the keys "/" for divide and "." for decimal on the keypad are just not registering. I've attempted to tackle this issue ...

Separate angular structure into various sections

I am developing a form builder using Angular dynamic form functionality. The form data is loaded from a JSON object, as shown below: jsonData: any = [ { "elementType": "textbox", "class": "col-12 col-md-4 col-sm-12", "key": "first_ ...

Retrieving information from React elements

Recently, I ventured into the world of React and started building a mock website for online food ordering. One of my components is called Items, which utilizes props to display all the food items on the webpage. import { useState } from "react"; ...