The modifications made to a bound value in AngularJS directives do not propagate to the outside components

I've been experimenting with bound variables inside directives, but I'm facing an issue where the view doesn't seem to refresh. Despite the model updating correctly (as seen in the console log) and calling $apply(), the view remains unchanged. Check out the example on jsfiddle!

Here's the HTML snippet:

<div ng-app="foo">
    <div ng-controller="MyCtrl">
        <div my-directive val="val" checked="checked" refresh="refresh"></div>
        <p>val (outside directive): {{val}}<p/>        
        <p>checked (outside directive): {{checked}}<p/>        
    </div>
</div>

And here's the corresponding JavaScript code:

angular.module('foo', []).directive('myDirective', function() {
    return {
        restrict: 'A',
        scope: {
            val: "=",
            checked: "=",
            refresh: "="
        },
        template: '<p>val (inside directive): {{val}}</p>' +
                    '<p>checked (inside directive): {{checked}}</p>' +
                    '<input type="checkbox" ng-model="checked">checked',
        link: function(scope, element, attrs) {
            var count = 0;
            //scope.val = "initialized";            
            scope.$watch('checked', function() {
                scope.val = "new value" + count;
                count += 1;
                console.log("updated val is: " + scope.val);
                scope.refresh();
            });
        } // link
    }; // return
}); // angular.module

function MyCtrl($scope) {
    $scope.val = "initial value";
    $scope.checked = false;   
    $scope.$watch('val', function(newVal) {
        console.log("newVal is: " + newVal);
    });
    $scope.refresh = function() {
        // none of the following lines make a difference
        if(!$scope.$$phase) $scope.$apply();
        // $scope.$apply();
        // if(!$scope.$$phase) $scope.$digest();
        // $scope.$digest();        
        console.log("val is: " + $scope.val);
        console.log("checked is: " + $scope.checked);        
    }; // refresh    
} // MyCtrl

Answer №1

Success comes easily by updating the AngularJS version from 1.1.1 to 1.2.1 in your fiddle.

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

Press anywhere on the screen to conceal the AngularJS element

Attempting to create a toggle effect using 2 ng-click functions. One is bound to a button, the other to the body tag. The goal is for my content to show when the button is clicked and hide when anywhere on the body is clicked. However, it seems that Angul ...

Arrange the HTML DOM elements in the order of their appearance in a list

Is it possible to rearrange the order of <div> and its elements based on database information? For example, consider the following HTML structure: <div id="container"> <div id="A"> Form elements for A</div> <div id="B"& ...

Traversing data in SQL Server that has been transmitted from Angular AJAX requests

Here is a snippet of the sample data being sent: { "Demo":"A 25-54", "Headlines": { "0":"Headline one", "1":"Headline two" } } This is how the post request is structured: $http({ method : 'POST', url : &a ...

Converting images to greyscale or transparency within a ReactJS component

I am exploring ways to transform an image into grayscale or make it transparent before using it as a background in ReactJS. Is there a way to achieve this in ReactJS? My current code snippet is shown below: <GridListTile> <img style={{ -we ...

Revise the list on the page containing MEANJS components

Utilizing MEAN JS, I am attempting to make edits to the list items on the page, but an error keeps appearing. I have initialized the data using ng-init="find()" for the list and ng-init="findOne()" for individual data. Error: [$resource:badcfg] Error in r ...

Convert JSON to HTML tooltip content - hide brackets and include <br> tags

I am currently working with a JSON object in my JAVA code. I am trying to display the values of the object using the following HTML and AngularJS syntax: <uib-progress ng-if="month.data" data-toggle="tooltip" title="{{month.dataTest|json}}"> < ...

What is the best way to make an HTML form show fields depending on certain conditions?

Initially, I created an index page containing a form with various fields. The utility was built to handle all the fields, but now there's been a change in requirements. What I need is for only the Controller Type and Test Type fields to be displayed f ...

Strategies for Applying Filters in Search Feature on IOS Devices

Currently, I have an array of books that are being displayed on my view. At the top of the view, there are 3 filters available: (All | Reading level 1 | Reading Level 2 | Reading Level 3) (All | Informational | Literature) (All | Published in 2000-2005 | ...

Removing solely the selected item, leaving the rest of the elements on the canvas untouched

Just starting out with coding and working on a game for a school project. The idea is to have random circles or "targets" appear on the screen, and the user has to click them. I've been struggling with keeping the "un-clicked" circles on the canvas wh ...

Using web3Provider in a Next.js environment

While attempting to integrate Web3-react v6 into my Next JS project, I encountered an error when trying to wrap my entire app with the provider. In _app.jsx, I included the following code: import React from 'react'; import { Web3ReactProvider } ...

Retrieve dynamic data for Pivot in Devexpress AngularJS

I am currently working on an AngularJS web app where I am implementing a Pivot using devexpress, specifically utilizing the Field Chooser. You can find the example code here: In the provided example, static data is used. However, I need to fetch data dyna ...

Creating a form for adding and editing using React Hook Form

I'm currently working on creating a form that can handle both the creation and editing of a product by passing values through an object. The form functions perfectly for creating a product, but I'm facing challenges in making it work for editing ...

Using jQuery to apply CSS to elements with multiple potential values

Here's a simple question: using jQuery's css function, you can retrieve the computed style of a CSS attribute. But what if there are multiple styles for that attribute being rendered simultaneously? Let's consider this example: <div id=" ...

Form with missing input fields submits nothing to the server

I created a Node project with a single view page for users to access information. When I use an HTML form to send data, the content is empty. I have verified multiple times using Postman that the information is being saved successfully when sent with the P ...

EdgeDriver with Selenium and Java can be interrupted by a modal window dialog box, causing the test script to pause its execution

I am in the process of creating a test script for our web application to test the upload functionality of a profile picture using Microsoft Edge and EdgeDriver. However, I am facing an issue where the script stops running completely after initiating the cl ...

Generating directives on the fly

I am relatively new to AngularJS and have a good understanding of the basics. My goal is to create a desktop interface where items are loaded dynamically from a database using $http. I have already developed a directive that displays a title and an icon fo ...

Differences in characteristics of Javascript and Python

As I tackle an exam question involving the calculation of delta for put and call options using the Black and Scholes formula, I stumbled upon a helpful website . Upon inspecting their code, I discovered this specific function: getDelta: function(spot, str ...

What is the best way to extract data from two dropdown menus and send it to separate URLs?

I need assistance with extracting the selected year value from the first dropdown. I would like to append this value to the URL of the header page and also to the options in the second dropdown. This way, when I select a PHP page from the second dropdown ...

Implementing auto-suggest functionality in a React-Bootstrap Select component

I am seeking to create a specialized react select component that can search through a constantly updating list pulled from a server api in JSON format. I am currently exploring other options aside from React-select because it is not compatible with my proj ...

Is there a way to have the user input data into a Firebase database directly from a Vue.js component?

Any assistance for a beginner like me would be greatly appreciated. I am currently working with vuejs and firebase to write data into the database from a vue component. I have successfully implemented authentication and writing functionality, but now I wan ...