AngularJS : Two way binding inside directives

Question

I'm relatively new to Angularjs and I'm writing an app. The app has an array of objects, each of the objects has a private variable called status. I have two filters, which return a subset of these objects based on their status. As an example, the statuses corresponding to these two filters are 'NEW' and 'OLD' respectively.

Next, I've written a directive that makes the divs formed by these objects, draggable. Basically, what the directive does is receive the object through a two way data binding, and then changes the status of the object by calling the corresponding method.

The problem is, the changes in the status of the object doesn't update the filter instantly. For example, when I drag three of the divs to the other half, their status gets updated, but the filter doesn't.

Here's the directive:

.directive('draggable', function ($document) {
return {
    scope: {
        bill: '=' // the bill object
    },
    restrict: 'A',
    link: function (scope, element, attr) {
        // do something here
        console.log('bill', scope.bill);
        var startX = 0,
            startY = 0,
            x = 0,
            y = 0,
            sourceX = 0,
            sourceY = 0,
            windowWidth = 0;

        element.on('mousedown', function (event) {
            event.preventDefault();
            startX = event.pageX - x;
            startY = event.pageY - y;
            $document.on('mousemove', mousemove);
            $document.on('mouseup', mouseup);
            windowWidth = $(window).width();
            sourceY = event.pageY;
            sourceX = event.pageX;
        });

        function mousemove(event) {
            y = event.pageY;
            x = event.pageX;
            element.css({
                top: y + 'px',
                left: x + 'px'
            });
        }

        function mouseup(event) {
            $document.unbind('mousemove', mousemove);
            $document.unbind('mouseup', mouseup);
            console.log('mouseup', startX, startY, event.screenX, event.screenY);
            var mid = windowWidth / 2;

            if (sourceX < mid && event.pageX >= mid) {
                // yes there was a change of sides
                scope.bill.markCooking(); // change the status to COOKING
                console.log('moved to COOKING', scope.bill.getStatus());
            } else if (sourceX >= mid && event.pageX < mid) {
                scope.bill.enq(); // change the status to NEW
                console.log('moved to ENQ', scope.bill.getStatus());
            }
        }
    }
}})

What am I doing wrong here?

Your will need to update the angular variable inside scope.apply — Anand
– Anand, Commented Mar 10, 2014 at 14:22

c0bra · Accepted Answer · 2014-03-10 14:21:10Z

3

Any time that you're in a browser event handler you are effectively outside of Angular's lifecycle. The user's actions have triggered the event, but Angular doesn't know that it needs to check and update its bindings (in this case, the bill status).

Calling scope.$apply() manually triggers Angular's change detection, and will update your bindings:

scope.$apply(function() {
  if (sourceX < mid && event.pageX >= mid) {
    // yes there was a change of sides
    scope.bill.markCooking(); // change the status to COOKING
    console.log('moved to COOKING', scope.bill.getStatus());
  } else if (sourceX >= mid && event.pageX < mid) {
    scope.bill.enq(); // change the status to NEW
    console.log('moved to ENQ', scope.bill.getStatus());
  }
});

You can read more about scopes and their lifecycle here: http://docs.angularjs.org/guide/scope

answered Mar 10, 2014 at 14:21

c0bra

3,01225 silver badges34 bronze badges

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

6 Comments

thescientist Over a year ago

Any time that you're in a browser event handler you are effectively outside of Angular's lifecycle. That's only true if you don't use Angular's supported ng-* events.

Matt Pileggi Over a year ago

When in doubt, and you're not seeing the view updated, you can always try to throw in a call to apply() to see if it fixes the problem. Angular will yell at you if you are already in a digest cycle, so you will know if that's the problem or not. It sounds like it is here.

Idkt Over a year ago

Works like a charm, and thanks for the resource! Adding as the answer.

c0bra Over a year ago

@thescientist absolutely, I should have been more clear. Manually-bound events that don't use Angular directives will require $apply() to update scope.

c0bra Over a year ago

@Ashesh depends on how you're creating the directives. An element can only have one isolate scope. Maybe take a look at this answer: stackoverflow.com/questions/20609770/…

|

Collectives™ on Stack Overflow

AngularJS : Two way binding inside directives

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related