The values of variables declared within the $scope are not being updated until the following cycle

Question

The values of variables declared within the $scope are not being updated until the following cycle

Check out this plunker - http://plnkr.co/edit/PaG1k5N37BTOflObnN7K?p=preview

Situation 1:

Step 1 - If you type "m" in the tags input field, a suggestion of Marie will pop up.

Step 2 - Typing "j" will bring up John as a suggestion.

Step 3 - Retyping "m" will not show any suggestions. The functionality is implemented in script.js where Marie is removed from $scope.to because it was already added to the tags input box in step 1.

Situation 2:

Step 1 - Entering "m" in the tags input box displays Marie as a suggestion.

Step 2 - Re-entering "m" still shows Marie as a suggestion.

This means that until John or Ghita are entered in the tags input box, Marie remains as a suggestion. Once John is entered, Marie stops appearing as a suggestion.

Do you have any insight on why this behavior occurs?

I attempted using $scope.$apply(), but I encountered an error stating that a $digest cycle is already in progress. So, if $scope.$digest() is currently running, why isn't the $scope.to variable being updated?

javascript angularjs angularjs-scope

Answer 1

Answer №1

If you are facing an issue with the Typeahead library, it is recommended to wrap your tag added callback in a $timeout call for resolution.

$scope.$on("decipher.tags.added", function(info, obj) {
  $timeout(function(){
    tagAdded(info, obj);
  });
});

This solution should fix the problem. Notably, the angular-tags directive itself follows this approach when filtering the internal tag list:

https://github.com/boneskull/angular-tags/blob/master/src/tags.js#L69

For reference, here's a working fork of your original Plunker.

Answer 2

If you are facing an issue with the Typeahead library, it is recommended to wrap your tag added callback in a $timeout call for resolution.

$scope.$on("decipher.tags.added", function(info, obj) {
  $timeout(function(){
    tagAdded(info, obj);
  });
});

This solution should fix the problem. Notably, the angular-tags directive itself follows this approach when filtering the internal tag list:

https://github.com/boneskull/angular-tags/blob/master/src/tags.js#L69

For reference, here's a working fork of your original Plunker.

Answer 3

Answer №2

It seems that the issue lies with the angular-tags library: https://github.com/boneskull/angular-tags/issues/28

It appears that the library has not been maintained for angular versions beyond 1.2.0-rc.2

Answer 4

It seems that the issue lies with the angular-tags library: https://github.com/boneskull/angular-tags/issues/28

It appears that the library has not been maintained for angular versions beyond 1.2.0-rc.2

Answer 5

Answer №3

According to a fellow user, it appears there is a glitch in the current version of the tags you are utilizing. A temporary fix involves employing $compile to make updates to the tags within tagAdded. To implement this solution, add $compile as an argument in your emailViewController, also including $scope, and declare it as a dependency at the end, together with $scope. Once done, you can execute

$compile(document.getElementsByTagName("tags")[0])($scope);

to effectuate the update. One drawback of this method is that the input field loses focus whenever a tag is added, potentially affecting the user experience of your application.

Check out http://plnkr.co/edit/UVELXnrjOKasRnuGVA0e?p=preview for a demonstration on using $compile

Answer 6

According to a fellow user, it appears there is a glitch in the current version of the tags you are utilizing. A temporary fix involves employing $compile to make updates to the tags within tagAdded. To implement this solution, add $compile as an argument in your emailViewController, also including $scope, and declare it as a dependency at the end, together with $scope. Once done, you can execute

$compile(document.getElementsByTagName("tags")[0])($scope);

to effectuate the update. One drawback of this method is that the input field loses focus whenever a tag is added, potentially affecting the user experience of your application.

Check out http://plnkr.co/edit/UVELXnrjOKasRnuGVA0e?p=preview for a demonstration on using $compile

Answer 7

Answer №4

If you want to ensure your variables are updated in Angular, consider using a $timeout function like this:

$timeout(function(){//insert your code here});

This will prevent any errors related to a digest already in progress.

Answer 8

If you want to ensure your variables are updated in Angular, consider using a $timeout function like this:

$timeout(function(){//insert your code here});

This will prevent any errors related to a digest already in progress.

Answer 9

Answer №5

give this a shot:

if(!$scope.$$phase) {
    $scope.$digest();
}

The variable $scope.$$phase is set to true when Angular is in the $digest cycle

Answer 10

give this a shot:

if(!$scope.$$phase) {
    $scope.$digest();
}

The variable $scope.$$phase is set to true when Angular is in the $digest cycle

The values of variables declared within the $scope are not being updated until the following cycle

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Obtaining an authorization token through a POST request and subsequently utilizing the POST response in a GET request

"Troubleshooting: Angular ng-click does not display any content

The property decorator in a TypeScript class behaves similarly to a static property

Order objects in an array based on various criteria using Javascript

Handling Ajax response in datatable

Utilizing jQuery for real-time operations

The NextJS App directory consistently stores the retrieved data in the cache, regardless of any no-cache options that may have been configured

Tips for adding a value to a specific object in an array

Can you provide guidance on implementing StyledComponents within the app folder of Next.js version 13?

Different scenarios call for different techniques when it comes to matching text between special characters

What's the best way to execute my custom userscript function once the host site finishes an ajax request?

Tips for distinguishing between the fireauth login callback for Login and signup

"XMLHttpRequest 206 Partial Content: Understanding the Importance of Partial

React sub-component internal state not refreshing upon receiving new props

Place content within two textfields using Material UI

Exploring the art of div transitions and animations using React and Tailwind CSS

Learn how to prevent the rendering of a specific section of code using JavaScript/TypeScript, similar to the functionality of *ngIf in Angular

Why isn't the jQuery click() function functioning on my modified HTML?

Creating an HTML table for displaying information

Modify the style of a webpage through JavaScript