Update the directive automatically whenever a change occurs in the root scope property

Question

Update the directive automatically whenever a change occurs in the root scope property

I am facing an issue with a directive that generates a random number. My goal is to reload or refresh this directive when a checkbox is toggled. Below is the code I have been using, but unfortunately, it's not working as expected.

 var app = angular.module('plunker', []);

app.controller('Ctrl1', function($scope, $rootScope) {
  $scope.name = 'World';
  $scope.updateTemplate = function() {
   $rootScope.$broadcast('refresh');
  }
});

app.controller('Ctrl2', function($scope) {
   $scope.$on('refresh', function (event) {
     alert("refreshing");
     if ($scope.refresh == 'false') {
       $scope.refresh = 'true';
     } else {
       $scope.refresh = 'false';
     }
   })
});

app.directive('myElement', function() {
  return {
    restrict: 'E',
    scope : {
      refresh : '='
    },
      template: "<div> Hello World </div>" + Math.random()
  }
})

For further reference, please see the Plunkr link: http://plnkr.co/edit/hAPqGoltoZELJ2Cva2sN?p=preview

javascript angularjs

Answer 1

Answer №1

AngularJS directive templates are processed and added to the DOM with markers that Angular utilizes for tasks like data binding. This occurs only once, when the directive is initially encountered in the DOM (unless there are modifiers like ngIf that can alter this behavior).

When you call the random function, you are inserting its value at that specific moment. Since the template remains static and is not re-evaluated, Angular assumes it's just plain text. To address this, modify your code to include a link function that sets a scope variable, which can then be used in an expression:

template: "<div> Hello World </div> {{ randomValue }}",
  link: function($scope) {
     function doRefresh() {
       $scope.randomValue = Math.random();
   }

   $scope.$on('refresh', doRefresh);
   doRefresh();
  }

You can view a working example on Plunkr here: http://plnkr.co/edit/VIJiJx2AuktyDgPiyCCu?p=preview

Answer 2

AngularJS directive templates are processed and added to the DOM with markers that Angular utilizes for tasks like data binding. This occurs only once, when the directive is initially encountered in the DOM (unless there are modifiers like ngIf that can alter this behavior).

When you call the random function, you are inserting its value at that specific moment. Since the template remains static and is not re-evaluated, Angular assumes it's just plain text. To address this, modify your code to include a link function that sets a scope variable, which can then be used in an expression:

template: "<div> Hello World </div> {{ randomValue }}",
  link: function($scope) {
     function doRefresh() {
       $scope.randomValue = Math.random();
   }

   $scope.$on('refresh', doRefresh);
   doRefresh();
  }

You can view a working example on Plunkr here: http://plnkr.co/edit/VIJiJx2AuktyDgPiyCCu?p=preview

Update the directive automatically whenever a change occurs in the root scope property

Answer №1

Similar questions

Is it possible to execute a function upon exiting my Node application?

Prevent Duplicate Service Instances in Angular

Populate an HTML table using a JavaScript array containing objects

What is the process for retrieving the information sent from the client application to the jsreport server?

Run the jQuery script once it has been successfully loaded using jQuery's .load method

using Angular and RxJS to filter out an element from an array

Is there a way to utilize regular expressions in React to dynamically insert onclick events into specific words within a text block?

iOS alert notification for navigator

Invoke a component and initiate a click event from within the App.vue component

Exploring Vue Slots: A guide to parsing and rendering slot components

Take action upon being added to a collection or being observed

What is the best way to activate a post function using a hyperlink?

Unable to retrieve image

What could be causing my Vue component to not refresh?

How can I clear a text box in Angular.js when the Google Autocomplete event is triggered?

Preparing data in the Vuex Store efficiently for an AJAX request

Is it possible to replace JavaScript files that are included in my index page if I am utilizing conditional comments specifically for IE9?

The Dropdown Button Functions Once and Then Stops

Maintain authentication state in React using express-session

The Google Maps feature is not appearing on the webpage as expected