Function $locationChangeStart in AngularJS not triggering

My code using the $location service in angular seems to be malfunctioning.

angular.module("app",[]).run(function($rootScope) {
    var $offFunction = $rootScope.$on("$locationChangeStart", function(e) {
      if (confirm("Are you sure")) 
        return $offFunction();
      return e.preventDefault();
  });
});

I am trying to prompt the user to confirm if they want to leave the page, but it does not work when changing the address in the bar or clicking the back button in the browser.

Here is the code on fiddler: http://jsfiddle.net/5dnm2/19/

Answer №1

To properly initialize the provider, remember to include $location. Check out the example at http://jsfiddle.net/5dnm2/41/


run(function($rootScope, $location) {...})

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

Error message indicating a problem with the locator By.linkText that contains dots in Selenium: TypeError - Invalid locator

I've searched through other resources for solutions, but I can't find anything that addresses my specific issue. The error message I'm encountering is TypeError: Invalid locator. Here's a snippet of my code (where I suspect the problem ...

Updating $scope in AngularJS works in JavaScript, but the changes are not reflected in the HTML

After making a request to the server and receiving a correct response, I have an array of objects called $scope.photos. However, when attempting to add a new photo by sending a request and then trying two different methods to update the $scope in the HTML, ...

Retrieving a value from a service function in AngularJS

I'm encountering an issue with retrieving values from a service within my controller. The value is obtained from an API using the following service: angular.module('app').factory('service', ['$q', '$rootScope&apos ...

After consolidating buffer geometries, adjusting the transparency/opacity of the shapes is not an option for me

I've been working on a model with multiple boxes and trying to optimize draw calls by using buffer geometry merger. However, I'm facing an issue where I can't change the opacity of geometries after merging. Here are the things I've tri ...

Retrieve the text content and identification value from each list item

I've found myself in a frustrating situation where I have an unordered list structured like this: var liList = $("#first").find("li"); var append = ""; for(var i =0; i< liList.length; i++){ var item = $(liList); append += "<option value ...

Exploring the Functionality of Scanning and Scrolling within Elasticsearch

Exploring ES and AngularJS in creating a compact search application. I am currently exploring how to incorporate the scan and scroll functionality in ES for pagination. According to the documentation, I need to make a search request and include 'sear ...

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!

i need to wrap 2 HTML elements together Here is my code snippet using Vue.js <tr> <th v-for="(item9,index) in product_all" :key="item9.id"><center>Qty</center></th> <th v-for="(item99,index) in product_all" :key=" ...

Tips for navigating to an external website through GraphQL

I am currently utilizing Node.js and Front-end on Next.js. I have a GraphQL server with a GetUrl method that returns a link (for example: ""). My goal is to redirect a client who made a request to that page with a Basic Auth Header. From what I understan ...

Node.js has no trouble loading HTML files, however, it seems to encounter issues when trying to

Having a bit of trouble with my JavaScript skills as I try to load my index.html file (seems like it should be the 5th easiest thing to do in JavaScript). Let me get straight to the point; when I manually open my index.html, it loads perfectly WITH the CS ...

Setting up Angularjs on your computer with the help of bower

In my home country, certain social networking websites and other online platforms are restricted. For instance, I am unable to access sites like meteor.com, codecademy.com, bower.herokuapp.com, and more. When attempting to install packages by running the & ...

Is there a way to customize event property setters such as event.pageX in JavaScript?

Is there a way to bypass event.pageX and event.pageY for all events? This is because IE10+ has a known bug where it sometimes returns floating point positions instead of integers for pageX/Y. ...

How can I delete a date value from a td if it matches the current date value?

I'm facing an issue with duplicate date values in my table rows and trying to find a solution using JavaScript or JQuery. The problem cannot be fixed within the SQL query itself, so I need to explore alternative approaches. I want to remove repeated d ...

Transitioning from the Play mode to the Pause mode upon pressing the Set button

Is there a way to make the button switch from play to pause once the 'Set' button is clicked? Clicking on 'Set' should change the SVG to display the pause button icon. Snippet of Code: https://jsfiddle.net/192h0w85/195/ (function ...

Any recommendations for building HTML in an iOS UIWebView?

When using a UIWeb view, how can I create HTML content? For example, I have some header html code. Then, I would like to include a JavaScript script and pass data to it. Once the JavaScript is injected, I want to add the remaining HTML content from a .html ...

Sending data to functions

Hello all, I'm a beginner with Vue so please bear with me :) I am facing a challenge where I have a function that retrieves user attributes and based on those attributes, I need to run a GraphQL query in another function. Both functions are under the ...

Displaying a specific div depending on the selected radio box in Angular JS

I am facing an issue with radio buttons and the 'delete' text while using ng-repeat in AngularJS. My requirement is to display the delete text based on the radio button that is checked. So, whenever a radio button is clicked, the corresponding de ...

How can I implement Before() and After() hooks within a hooks.js file for a Selenium and JavaScript project?

Within my Selenium JS / Cucumber framework, I have incorporated Before() & After() functions to handle the setup and tear down of my webdriver. To manage these functions, I decided to organize them in my customSteps.js file alongside other cucumber st ...

Utilizing the setNetWorkConditions function in webdriverjs for Chrome

Is there a way to properly utilize the webdriverjs setNetworkConditions() method as outlined in the official documentation? This is what my code looks like: const chromeCapabilities = webdriver.Capabilities.chrome() const chromeOptions = { ...

Steps to create a thumbnail image following the insertion of an image into an input type="file" within a form, and subsequently submitting both elements on the form together

Currently, I am working on a form that enables users to upload images. Once the user submits the form, my goal is to create thumbnails for each image on the front-end and save them on the server afterwards. Due to security restrictions, changing the value ...

After an Ajax request, the functionality of Javascript/Jquery ceases to work

After successfully submitting a form via ajax for the first time, the subsequent submissions seem to break all javascript functionality on the page. Additionally, the form is unable to submit with ajax again. Below is the code snippet for the ajax call: ...