范围未在AngularJS中更新

Question

我刚开始使用AngularJS。我从官方网站上完成了教程。 我试着开始自己的网络应用程序。

我想“调整大小”和“剪切”一个div。

我首先尝试调整div，但问题是scope永远不会在mouse move上更新。当我在div.tool（红色div）上徘徊时。我创建了一个名为resize direct的指令。

我不明白为什么我的范围没有更新。

修改：我的scope已在console.log(...)中更新，但未在视图index.html

中更新

谢谢

这是我的代码：

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'
]);

Answer 1

只要更新范围，就会评估像{ width: myWidth }这样的表达式。在事件监听器中更新范围时，您知道，但angular不知道范围已更改。

为了告知角度范围已更改，您需要在更改后调用scope.$apply()。这告诉angular有些事情发生了变化，表达式可能需要再次评估。

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();

Answer 2

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

这不起作用。来自docs：

  

find（） - 仅限于按标记名称

进行查找

您可以改用：

var resizer = element.children()[0]

但我认为最好在指令中创建div：

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