我们如何在 angular 中使用 $scope.$apply 方法，如 javascript apply 方法，如 function.apply(elem)？

Question

我创建了一个纯动态内容的页面 javascript 和 angular 类似。

我在 javascript 中使用了 apply 方法来重用分配给其他元素的功能。它工作得很好。我无法在 angular 中做同样的事情。请看下面用 JS 和 Angular 创建的插件。在函数 move() 方法中，通过 onclick 我动画将文本移动到一定距离。查看动画单击两个插件中输出中的所有文本。在 JS plunker 中为了在 onload 中为 firstChild 设置动画，在第 38 行我使用了 move.apply(firstElem); 但我无法在 angular 中做同样的事情。我想像在 JS 中那样做一些简单的事情。哪种方法正确？我们可以使用 $scope.$apply 来解决这个问题吗？或任何其他方式？请帮忙

functionName.apply(elem); // javascript
$scope.move(elem); // angular

Using JavaScript

Using AngularJS

Answer 1

您看错了 angular 部分。在正常的 Javascript/jQuery 中，您通常以 命令式 方式进行编码，就像您将元素告诉 "move 100px to the right" 或其他任何方式一样。因此，在您的纯 JS 示例中，您告诉元素更改其位置和颜色。

但是，在 Angular 中，您希望以 声明式 方式进行编码。在您的情况下，这意味着当您拥有所有这些文本块时，它们应该有一个属性来表示元素是否已向右移动，例如如果它应该获得与移动元素关联的样式。

我们将创建一个 css 选择器来表示移动的元素，而不是直接修改元素的样式：

.moved {
    left: 100px;
    background: red;
}

然后我们将使用 ng-class 指令来指定元素何时应获得此 class；也就是说，当它具有 moved 属性时。我们还将更改 $scope.move 函数的使用方式，并删除 ng-init，因为它完全没有必要。

<div ng-class="{moved: x.moved}" ng-click="move(x)" class="divText" ng-repeat="x in myData">
    <div>{{ x.text }}</div>
</div>

然后是JS部分。使用 ng-class，基本上 $scope.move 函数要做的就是给 text 对象一个 moved 属性：

$scope.move = function (text) {
    text.moved = true;
};

然后我们将使用 $timeout 使第一个元素在数据加载后不久移动：

  $timeout(function() {
      $scope.move($scope.myData[0])
  }, 500)

就是这样！现在，您的 Angular 示例中的功能与您的 JS 示例中的功能相同。 Here's a plunker link to the edited Angular example.

我建议您阅读关于 jQuery 与 Angular 中编码差异的优秀 Whosebug 答案："Thinking in AngularJS" if I have a jQuery background?

我们如何在 angular 中使用 $scope.$apply 方法，如 javascript apply 方法，如 function.apply(elem)？

How can we use $scope.$apply method in angular like javascript apply method like function.apply(elem)?

javascript

apply

angularjs

angularjs-scope