Modifying $scope properties in AngularJS does not automatically update the view unless $scope.$apply is invoked

Check out this Plunker for reference: http://plnkr.co/edit/2gD0AB. The Plunk seems to have an issue with the $scope.$on("$viewContentLoaded") not firing, but it works fine on my end. Hopefully, you can still get the gist of what I'm trying to achieve.

My goal is to move field objects from $scope.fields to 

$scope.groupFields = [], $scope.listFields = [], $scope.dataFields = []
when dragging them to the designated drop areas. I've managed to accomplish this using jQuery UI and jQuery UI touch punch to ensure mobile compatibility.

If you drag elements from the fields box to the empty boxes, you'll notice no visual change until you inspect $scope.fields with a console.log in the drop event listener, revealing that the field objects are correctly placed in their respective boxes.

Clicking the Add element button triggers console.log($scope.groupFields);, causing all elements to appear correctly in their intended boxes as initially planned.

After struggling and researching extensively, I discovered that calling $scope.$apply() after the moveField function within the drop event resolves the issue.

I'm puzzled by this solution. Shouldn't a digest process already be running to update the view based on controller actions?

Thank you!

javascriptangularjs

Answer №1

Simply putting the code that manages these jQuery drop events inside the controller doesn't guarantee it will operate within the angularjs scope/word. In order for those modifications to take effect, you must prompt the angularjs app to perform a dirty check on its models. This can be accomplished by invoking the $apply() or $digest() functions. It's essential to use one of these functions after handling a jQuery event that alters $scope properties or following a timeout (or interval).

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

Unusual actions observed in ajax rails form calculator with pre-filled values

I have a form calculator in Rails that utilizes AJAX without a database. While it functions properly, I have noticed some peculiar behavior which I would like to address. Firstly, I navigate to the /interest_calculator page Then, I input 10 into @first_0 ...

javascriptruby-on-railsajaxforms

Tips on connecting properties of two individual JavaScript objects

Within my angular service, I have two objects with a property named nodes that I want to point to the same array. However, when I make changes to the nodes in one object, it does not reflect on the other. Here is how I am attempting to achieve this: objec ...

javascriptangularjsarrayspass-by-reference

There seems to be an issue with the $scope value not being properly updated

In my AngularJS application, I am trying to update a $scope variable and display it in a Bootstrap modal. However, the new value is not appearing in the modal. Here is my code: View: <li ng-controller="QuickViewController"> <a href="javascri ...

angularjsmodal-dialogangularjs-scopeangular-controller

"Converting the initial row of a CSV file into the header section of

I have been trying to create a table using ajax but I am facing difficulty in enclosing the <th> elements inside the <tr id="header">. I have tried using methods like appendTo and prependTo but it hasn't worked for me. The desired structu ...

javascripthtmlcsvparsinghtml-table

Isolating JavaScript Ajax codes in a Laravel 8 js file results in functionality issues

Having recently delved into the world of Ajax, I've encountered some issues. Allow me to do my best in explaining the problem at hand. Currently, I'm engaged in a Laravel 8 project. In this project, users are given the choice to select an image, ...

javascriptajaxlaravellaravel-8

`The process of adding an element to the beginning of an array``

I find myself in this scenario: I am dealing with 2 array1 variables, defined as array1 = ["fruit","vegetables"]; and array2 = [["apple","banana"],["tomato"]]; // index 0:represent fruit i,e (["apple","banana"]), index 1: vegetables i,e (["tomato"]) T ...

javascriptjquerynode.js

What is the function type in React-Native?

I need assistance understanding the following function: const myFunction = () => () => { //perform a task } Can someone explain the meaning of this function? ...

javascriptandroidiosreactjsreact-native

What is the best way to find unique characters along with their frequency in JavaScript?

Can you help me adjust this code in order to receive the desired output: "T-1 r-1 a-1 e-1 " (other characters are repeating. So no need to print the others) function checkUniqueCharacters() { var uniqueChars = []; var count = 0; var full ...

javascriptarraysloops

What is the best way to ensure that md-action buttons remain fixed at the bottom of an md-card?

Is there a way to ensure that buttons inside md-action always stay at the bottom of the outer md-card, maintaining a fixed position? http://codepen.io/ResilientJoe/pen/aNEzBp Even after setting layout-align="end end" as mentioned in this resour ...

angularjsangular-material

Determine the scope of an element in Javascript in relation to its parent container

I have a function that returns an array with two elements, however it won't work in IE. The function returns the HTML code of what the user selects inside a div (with id=text). It also returns the range of the selection. If the user selects a simpl ...

javascriptselectionrange

Interactive image map with hover effects and external image swapping placed beyond the container

I've encountered a problem with a responsive image map and rollovers. Using Matt Stow's responsive image jQuery plugin ensures that coordinates are responsive, and clicking on an area brings up Lightview as expected. However, the issue arises whe ...

phpjavascriptjqueryresponsive-design

To encounter an "undefined" response in the following route of an express application, utilize the next('route') function

const express = require('express') const app = express() app.get('/user/:uid', (req, res, next) => { if (req.params.uid === 'lai9fox') next('route') else next() }, (req, res, next) => { res.send(`<h1& ...

javascriptnode.jsexpress

Has anyone discovered an Angular2 equivalent to $provide.value() while testing promises?

I am currently experimenting with testing a promise in Angular2. Here is what I have so far: this.fooService.getData().then(data => this.fooData = data); If you are interested in learning about testing promises for Angular 1, check out this article. ...

angularjsangularjasmineionic2

Styling text in JavaScript and CSS with colored fonts and underlines

I am looking to customize the CSS for the font style. <div id="a" onmouseover="chbg('red','b')" onmouseout="chbg('white','b')">This will change b element</div> <div id="b">This is element b</div ...

javascripthtmlcss

Having trouble linking JavaScript files to an HTML file within a standalone Java application

Hello, I am currently working on a standalone Java application that runs on a particular port number. As part of my project, I am attempting to create a user interface using HTML which involves utilizing some external JavaScript files. In order to include ...

javascripthtmlfileinclude

What is the process for accessing a local .json file from a remote machine or folder?

I am currently working on a project that involves a .json file stored in my local folder. Along with the file, I have Javascript code in the same directory to access and read the values from the .json file. To open the file, this is the line of code I use: ...

javascriptnode-modules

Before starting the operation, the beforeEach() function in the asynchronous Jasmine test is not being called

I'm currently coding a test for my client-server modules. One challenge I'm facing is that I need to ensure the server is running before the client sends its requests. To achieve this, I am attempting to utilize the beforeEach method. However, th ...

javascriptnode.jsasynchronoustestingjasmine

Using angular ui-grid to group data by a string column may lead to the creation of duplicate groups containing duplicate

Explanation of an issue I am facing: In my JSON data array, there are 21 rows categorized by 3 different types of "AssetTypeName." When the grid is grouped by this column, the same group is displayed multiple times, except for groups with only one row in t ...

angularjsangular-ui-grid

Allowing the primary content to span the entire width of the mobile screen

I have scoured various forums in search of answers, but unfortunately, I haven't found a solution that fits my specific query. I am looking to ensure that the .main-content (article text and images) occupies the full width of the mobile screen without ...

javascripthtmlcssmobileresponsive

Display a tooltip for ever-changing content

My HTML code displays dynamic rows with information, along with an image link that reveals specific details about the clicked row using the compentence_ID field. echo "<td>".$compi['Competence_ID']."</td>"; ec ...

phpjavascriptjqueryajax