我们如何在 angular 中使用 $scope.$apply 方法，比如像 function.apply(elem) 这样的 javascript 应用方法? [英] How can we use $scope.$apply method in angular like javascript apply method like function.apply(elem)?
问题描述
我用纯 javascript 和类似的 angular 创建了一个包含动态内容的页面.
我在 javascript 中使用了 apply 方法来重用分配给其他元素的函数.它完美地工作.我无法在角度上做同样的事情.请参阅以下用 JS 和 Angular 创建的 plunkers.在函数 move() 方法中，通过 onclick 我动画将文本移动到一定距离.要查看动画 在两个 plunker 中单击输出中的所有文本.在 JS plunker 为了在 onload 中为 firstChild 设置动画，在第 38 行我使用了 move.apply(firstElem); 但我无法在 angular 中做同样的事情.我想做一些简单的事情，就像我在 JS 中所做的那样.哪个是正确的做法?我们可以使用 $scope.$apply 来解决这个问题吗?或任何其他方式?请帮忙.
functionName.apply(elem);//javascript$scope.move(elem);//角度您看错了角度部分.在普通的 Javascript/jQuery 中，您通常以命令式方式进行编码，就像您告诉元素向右移动 100px"或其他任何内容一样.所以在你的纯 JS 示例中，你告诉元素改变它的位置和颜色.
然而，在 Angular 中，您希望以声明式方式进行编码.在您的情况下，这意味着当您拥有所有这些文本块时，它们应该具有一个属性来表示元素是否已向右移动，例如如果它应该获取与移动元素关联的样式.
我们将创建一个 css 选择器来表示移动的元素，而不是直接修改元素的样式:
.moved {左:100px；背景:红色；}然后我们将使用 ng-class 指令来指定元素何时应该获得此类；也就是说，当它具有 moved 属性时.我们还将改变 $scope.move 函数的使用方式，并删除 ng-init，因为它完全没有必要.
<div>{{ x.text }}</div>然后是 JS 部分.对于 ng-class，基本上所有 $scope.move 函数要做的就是给 text 对象一个 moved 属性:
$scope.move = 函数(文本){text.moved = true;};然后我们将使用 $timeout 使第一个元素在数据加载后不久移动:
$timeout(function() {$scope.move($scope.myData[0])}, 500)就是这样！您现在在 Angular 示例中拥有与在 JS 示例中相同的功能.这是编辑过的 Angular 示例的 plunker 链接.
我建议您阅读有关 jQuery 与 Angular 编码差异的优秀 stackoverflow 答案:在 AngularJS 中思考"；如果我有 jQuery 背景?
I created a page with dynamic content in pure javascript and angular in similar.
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
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.
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.
Instead of modifying the element's style directly, we'll create a css selector to represent a moved element:
.moved {
left: 100px;
background: red;
}
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>
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;
};
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)
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.
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?
这篇关于我们如何在 angular 中使用 $scope.$apply 方法，比如像 function.apply(elem) 这样的 javascript 应用方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
