AngularJS Directive doesn't update scope for callback

Question

I am using directives to create a component library in AngularJS 1.5. Hence, my directives need to have isolate scopes.

Some of my directives have callbacks so you can pass in a function to get invoked by the directive. However, when that callback is invoked by the directive, it doesn't seem like the changes to $scope attributes are fully updated like I would expect them to be.

Here is a Plunker that shows this behavior: http://embed.plnkr.co/Rg15FHtHgCDExxOYNwNa/

Here is what the code looks like:

<script>
    var app = angular.module('myApp', []);
    app.controller('Controller', ['$scope',function($scope) {
        // initialize the value to something obvious
        $scope.clickersValue = "BEFORE";

        // when this call back is called we would expect the value to be updated by updated by the directive
        $scope.clickersCallback = function() {
        //$scope.$apply(); // $apply is not allowed here
        $scope.clickersValueRightAfterCall = $scope.clickersValue;
        console.log("clickersCallback: scope.clickersValue", $scope.clickersValue);
    };
  }
]);

app.directive('clicker', [function() {
  return {
    restrict: 'EA',
    template: '<div ng-click="clicked()">click me!</div>',
    controller: ['$scope', function($scope) {
      $scope.clicked = function() {
        console.log("you clicked me.");
        $scope.newValue = 'VALID';
        $scope.myUpdate();
      }
    }],
    scope: {
      "newValue": "=",
      "myUpdate": "&"
    }
  };
}]);
</script>

So when clickersCallback gets invoked the clickersValue attribute still has the old value. I have tried using $scope.$apply but of course it isn't allowed when another update is happening. I also tried using controller_bind but got the same effect.

Gabriel Hobold · Accepted Answer · 2016-11-05 04:22:08Z

3

Wrap the code inside clickersCallback function in a $timeout function.

$timeout(function() {
    $scope.clickersValueRightAfterCall = $scope.clickersValue;
    console.log("clickersCallback: scope.clickersValue", $scope.clickersValue); 
});

Updated plunker

The $timeout does not generate error like „$digest already in progress“ because $timeout tells Angular that after the current cycle, there is a timeout waiting and this way it ensures that there will not any collisions between digest cycles and thus output of $timeout will execute on a new $digest cycle. source

Edit 1: As the OP said below, the user of the directive should not have to write any "special" code in his callback function.

To achieve this behavior I changed the $timeout from de controller to the directive.

Controller callback function (without changes):

$scope.clickersCallback = function() {
    $scope.clickersValueRightAfterCall = $scope.clickersValue;
    console.log("clickersCallback: scope.clickersValue", $scope.clickersValue);
};

Directive code (inject $timeout in the directive):

 $scope.clicked = function() {
     console.log("you clicked me.");
     $scope.newValue = 'VALID';
     $timeout(function() {
         $scope.myUpdate();
     });
 }

Updated plunker

edited Nov 5, 2016 at 4:22

answered Nov 4, 2016 at 16:24

Gabriel Hobold

6936 silver badges16 bronze badges

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

3 Comments

Todd Palmer Over a year ago

Gabriel, Thanks for the creative approach. But, this requires the user of the directive to do something special in their code. I am really looking for a way that the directive user can just use an expression like we do in ng-click. But, I still up-voted your suggestion.

Gabriel Hobold Over a year ago

Maybe you can wrap the $scope.myUpdate(); call inside the $timeout in the directive. Is that what you want? plunker

Todd Palmer Over a year ago

Yes! That is exactly what I wanted! I tried that after your suggestion but I must have gotten it wrong in my code somehow. Can you post that as an answer so I can mark it answered? Can't thank you enough, this is great.

Collectives™ on Stack Overflow

AngularJS Directive doesn't update scope for callback

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related