Scope not updated in AngularJS

Question

I have just started using AngularJS. I've done the tutorial from the official site. I tried to start my own web application.

I would like to "resize" and "cut" a div.

I started by trying resize div but the problem is the scope is never updated on mouse move. When I mousedown on div.tool (red div). I created a directive named resize direct.

I don't understand why my scope is not updated.

Edit : My scope is updated in the console.log(...), but not in the view index.html

Thanks

enter image description here

Here is my code :

index.html :

<div class="roadmap" ng-app="dragApp" ng-controller="dragCtrl">
<div class="time">
  <div class="duree" resizedirect ng-style="{ width: myWidth }">
     <div class="tool"></div>
  </div>
</div>
</div>

js/directives.js :

'use strict';

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

dragDirectives.directive('resizedirect', function() {
return {
restrict: 'A',
link: function(scope, element, attr) {
  scope.name = "Third ";
  scope.myWidth = "100px";

  var resizer = element.find(".tool")[0];
  console.log(resizer);
  resizer.addEventListener('mousedown', scope.initDrag, false);

  var startX, startY, startWidth, startHeight;

  scope.initDrag = function(e) {
     startX = e.clientX;
     startY = e.clientY;
     startWidth = parseInt(element.css("width"), 10);
     resizer.addEventListener('mousemove', scope.doDrag, false);
     resizer.addEventListener('mouseup', scope.stopDrag, false);
  }

  scope.doDrag = function(e) {
     //console.log( (startWidth + e.clientX - startX) + 'px' );
     startWidth = parseInt(element.css("width"), 10);
     scope.myWidth = (startWidth + e.clientX - startX) + 'px';
     scope.myWidth = "200px";
     console.log(scope.myWidth);
  }

  scope.stopDrag = function(e) {
      resizer.removeEventListener('mousemove', scope.doDrag, false);    
      resizer.removeEventListener('mouseup', scope.stopDrag, false);
  }

}

}
})

js/app.js :

'use strict';

var dragApp = angular.module('dragApp', [
  'ngRoute',
  'dragDirectives'
]);

@zeroflagL: This is probably the right answer, but maybe you need to add an answer with a little more detail. Someone not familiar with the concept is unlikely to be able to guess what they should do by this cryptic "You forgot $apply()" message. You should explain what the problem is and give more details on how to solve it (e.x. why is scope.$apply() required, where to put it etc). — gkalpak
– gkalpak, Commented Apr 14, 2014 at 6:20

a better oliver · Accepted Answer · 2014-04-14 06:56:46Z

2

Expressions like { width: myWidth } are evaluated whenever the scope is updated. When you update the scope within an event listener, then you know, but angular does not know that the scope has been changed.

In order to tell angular that the scope has been changed you need to call scope.$apply() after the change. This tells angular that something has changed and the expressions might need to be evaluated again.

scope.doDrag = function(e) {
  //console.log( (startWidth + e.clientX - startX) + 'px' );
  startWidth = parseInt(element.css("width"), 10);
  scope.myWidth = (startWidth + e.clientX - startX) + 'px';
  scope.myWidth = "200px";
  scope.$apply();

answered Apr 14, 2014 at 6:56

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

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

1 Comment

Steffi Over a year ago

And bim ! Thank you very much. It works great ! I didn't know that angular does not know that has been changed within an event listener.

Mosho · Accepted Answer · 2014-04-13 17:52:26Z

0

var resizer = element.find(".tool")[0];

This doesn't work. From the docs:

find() - Limited to lookups by tag name

You can use this instead:

var resizer = element.children()[0]

But I think it would be best if you create the div in the directive:

var resizer = angular.element('<div class="tool" />');
element.append(resizer);

answered Apr 13, 2014 at 17:52

Mosho

7,0783 gold badges36 silver badges52 bronze badges

2 Comments

Abhishek Prakash Over a year ago

But if jquery is included then the dependency from jqLite shifts to jQuery and the find method will work as expected, otherwise find is limited to lookups by tag name.

Steffi Over a year ago

It works because in the console.log my scope is updated. Not in the view... :(

Collectives™ on Stack Overflow

Scope not updated in AngularJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related