我们如何在javascript等角度应用$ scope.$ apply方法，例如function.apply(elem)? [英] How can we use $scope.$apply method in angular like javascript apply method like function.apply(elem)?

问题描述

我创建了一个页面，页面中的动态内容使用纯JavaScript，相似的角度显示.

I created a page with dynamic content in pure javascript and angular in similar.

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

I used apply method in javascript to reuse the function assigned to other element. It works perfectly. I am unable to do the same in angular. please see the below plunkers created in JS and Angular. In function move() method, by onclick I animated to move the text to some distance. To see animation Click on all texts in output in both plunkers. In JS plunker To animate the firstChild in onload, in line 38 I used move.apply(firstElem); But I am unable to do the same thing in angular. I want to do something simlpy like I did in JS. Which is the right way to do? can we use $scope.$apply and solve this? or any other way? please help.

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

使用JavaScript

使用AngularJS

推荐答案

您正在以错误的方式看待角部.在普通的Javascript/jQuery中，您通常以命令性的方式进行编码，例如，您告诉元素向右移动100px"或其他.因此，在您的纯JS示例中，您告诉元素更改其位置和颜色.

You're looking at the angular part the wrong way. In normal Javascript/jQuery you generally code in an imperative way, as in you tell an element to "move 100px to the right" or whatever. So in your pure JS example, you tell the element to change its position and color.

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

In Angular, however, you want to code in a declarative way. In your case, this means that when you have all these text blocks, they should have an attribute to represent whether the element has moved to the right, e.g. if it should get the styles associated to a moved element.

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

Instead of modifying the element's style directly, we'll create a css selector to represent a moved element:

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

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

We'll then use the ng-class directive to specify when an element should get this class; that is, when it has the moved attribute. We'll also change up the way $scope.move function is used, and remove the ng-init since it's completely unnecessary.

<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属性:

Then for the JS part. With the ng-class, basically all the $scope.move function has to do is to give the text object a moved attribute:

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

然后，我们将使用$timeout导致数据加载后不久，第一个元素移动:

Then we'll use $timeout to cause the first element to move shortly after the data has been loaded:

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

就是这样！现在，您的Angular示例中具有与JS中相同的功能. 这是指向已编辑的Angular示例的链接.

And that's it! You now have the same functionality in your Angular example as in your JS one. Here's a plunker link to the edited Angular example.

我建议您阅读有关jQuery与Angular编码差异的出色stackoverflow答案:

I'd recommend you to read this excellent stackoverflow answer regarding the differences of coding in jQuery vs Angular: "Thinking in AngularJS" if I have a jQuery background?

这篇关于我们如何在javascript等角度应用$ scope.$ apply方法，例如function.apply(elem)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！