Refreshing $scope variables within a function

Question

Refreshing $scope variables within a function

$scope.myVar = cheese;

function please(){
  $scope.myVar = "New Value";
}

google.maps.event.addListener(marker, 'click', please);

This scenario is perplexing to me. I have a variable called "cheese" in the HTML and I anticipated that clicking on a Google marker would update it to "New Value" similar to how ng-click works.

However, when I added an alert inside the function, it correctly displayed "New Value", but this value did not persist outside of the function.

I experimented with different approaches:

myVar = "New Value"

var myVar = "New Value"

I suspect the issue may stem from confusion between global and local variables. As someone new to Angular, I find this aspect particularly challenging to grasp.

Thank you for any help or clarification.

javascript angularjs

Answer 1

Answer №1

Using $apply is necessary in this case because the function is not being called from within angular.js itself.

function updateValue(){
  $scope.$apply(function() {
    $scope.myVar = "Updated Value";
  });
}

For more information, check out this resource.

Answer 2

Using $apply is necessary in this case because the function is not being called from within angular.js itself.

function updateValue(){
  $scope.$apply(function() {
    $scope.myVar = "Updated Value";
  });
}

For more information, check out this resource.

Answer 3

Answer №2

Consider defining please() as a $scope method:

$scope.myVar = cheese;

$scope.please = function () {
  $scope.myVar = "Updated Value";
}

google.maps.event.addListener(marker, 'click', $scope.please());

Answer 4

Consider defining please() as a $scope method:

$scope.myVar = cheese;

$scope.please = function () {
  $scope.myVar = "Updated Value";
}

google.maps.event.addListener(marker, 'click', $scope.please());

Refreshing $scope variables within a function

Answer №1

Answer №2

Similar questions

Preserve the variable alterations for future promises

Is it recommended to create model classes in React components?

Using JavaScript and Regular Expressions for Performing Multiple Replacements

What is the ternary operation syntax for setting the img src attribute in Angular 8?

Ensure that the alert for an Ajax JSON record count remains active when the count is

When enclosing my Javascript code in CDATA tags within my SVG files, it does not execute

Automatically insert a comma for type=number in VueJS

Enhance JSON nesting with knockoutJS

Leverage jsencrypt in Ionic 3

Running a script through the terminal using an electron js application, but the process necessitates the installation of node js

Setting the state for an element in React after it has been mounted - a step-by-step guide

Steps for displaying the contents of a file from Firebase storage on a React component

The error message states: "An attempt was made to destructure a non-iterable object. In order for non-array objects to be iterable, they must have a [Symbol.iterator

Loading Textures in Three.js Using async / await is the Way to Go

Tips on separating a function into two separate files in Node.js

Proper method for using helper service (ajax) in Angular js without relying on scope

Efficient ways to retrieve row values and remove data using DataTables

Creating a fade in or fade out effect in AJAX without using jQuery is a simple yet

Updating Icons on a Jquery Accordion

Using Reactjs to Send Emails