Angular parent scope not updated when directive updates the same scope variable

Question

I have written a directive to validate certain binded value and modify it before executing the action on the button. But any value update in directive value is not reflected in the parent scope. I have used (=) in the directive so my assumption is it will update the parent scope as well.

Let me know what I am doing wrong. Have attached the images.

This is the view where both parent and the directive sharing the same text value.

The result value assigned to the validate text is not reflected in the parent selected node. while the ok function is executed. I have tried $timeout, $evalAsync on the scope.ngClick with no success. enter image description here

This is the view where both parent and the directive sharing the same text value.

The result value assigned to the validate text is not reflected in the parent selected node. while the ok function is executed.

I do see the value getting updated back in the text area. But dont know why it is not updated when the ok funciton is executed.

I have tried $timeout, $evalAsync on the scope.ngClick with no success.

Why do you call scope.ngClick() inside your directive? It is called automatically by Angular's ngClick directive. — Vadim
– Vadim, Commented Apr 11, 2014 at 22:11
You see a $dialog that is an dialog box and only on clik on yes I will trigger the ngClick otherwise I should not allow the original ngClick to fire — anandaravindan
– anandaravindan, Commented Apr 11, 2014 at 22:15

Vadim · Accepted Answer · 2014-04-11 21:20:07Z

1

Changes that are made inside event handlers of elements of custom directives are not triggering Angular's digest cycle. Therefore you need to notify Angular that scope has been changed (by calling scope.$digest() or scope.$apply()). Another thing I have noticed is that method ok() is called twice: once inside Angular's ngClick directive and second time inside your directive. If it is not a desired behavior, remove it from your directive. Here is some working code:

HTML

<body ng-controller="myController">
  <textarea ng-model="selected.note"></textarea>
  <button type="button" validatetext="selected.note" ng-click="ok()">Click Me!</button>
</body>

JavaScript

angular.module('online-desktop', []).
  controller('myController', ['$scope', function($scope) {
    $scope.selected = {
      note: 'old value'
    };
    $scope.ok = function() {
      alert($scope.selected.note);
    };
  }]).
  directive('validatetext', [function() {
    return {
      scope: {
        validatetext: '='
      },
      link: function(scope, element, attr) {
        element.on('click', function() {
          scope.$apply(function() { // <= change scope properties inside scope.$apply()
            scope.validatetext = 'some new value';
          });
        });
      }
    }
  }]);

Plunker: http://plnkr.co/edit/rmJVBzjIeiVcoQUV79z2?p=preview

edited Apr 11, 2014 at 21:20

answered Apr 11, 2014 at 21:12

Vadim

8,7744 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vadim Over a year ago

@user2045685 Can you create some Plunker/JSFiddle/JSBin or whatever with your code, where I can see the error (digest already in progress)?

anandaravindan Over a year ago

It worked the problem for me was. I used dialog service which called scope.$apply internally. So I have changed the code this way to work

ruedamanuel · Accepted Answer · 2014-04-11 20:54:33Z

0

I would suggest you try a $rootScope.$broadcast from the directive and catch it in the parent with $scope.$on

//directive
$rootScope.$broadcast("valueUpdated", result);

//parent
$scope.$on("valueUpdated", function(event, result){
//update the value here
});

You can also probably use $scope.$emit instead of $rootScope.$broadcast.

answered Apr 11, 2014 at 20:54

ruedamanuel

1,9281 gold badge23 silver badges24 bronze badges

2 Comments

anandaravindan Over a year ago

I have multiple places to update, if that is the case I can instead write the utility function in the respective ok. I just want to create independent.

anandaravindan Over a year ago

I have updated the question. I do get the updated value on the text area. The issue is it is not getting updated before the ngclick is triggered.

Collectives™ on Stack Overflow

Angular parent scope not updated when directive updates the same scope variable

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related