我們如何在javascript等角度應用$ scope。$ apply方法，例如function.apply（elem）？

Question

我創建了一個頁面，其中的動態內容使用純JavaScript，相似的角度顯示。

我在javascript中使用了apply方法來重用分配給其他元素的函數。 它運作完美。 我無法做到同樣的角度。 請參閱以下在JS和Angular中創建的插件。 在函數move()方法中，通過onclick，我可以將文本移動到一定距離。 查看動畫單擊兩個插塞中輸出中的所有文本。 在JS plunker中，為onload上的firstChild設置動畫，在第38行中，我使用了move.apply(firstElem); 但是我無法做到同樣的事情。 我想像在JS中一樣做一些簡單的事情。 哪個是正確的方法？ 我們可以使用$ scope。$ apply解決此問題嗎？ 或其他方式？ 請幫忙。

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

使用JavaScript

使用AngularJS

Answer 1

您正在以錯誤的方式看待角部。 在普通的Javascript / jQuery中，通常以命令式方式進行編碼，例如，您告訴元素“向右移動100px”或其他。 因此，在您的純JS示例中，您告訴元素更改其位置和顏色。

但是，在Angular中，您希望以聲明的方式進行編碼。 在您的情況下，這意味着當您擁有所有這些文本塊時，它們應具有一個屬性，以表示元素是否已向右移動，例如，是否應獲取與已移動元素關聯的樣式。

我們將直接創建一個css選擇器來表示移動的元素，而不是直接修改元素的樣式：

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

然后，我們將使用ng-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中相同的功能。 這是指向已編輯的Angular示例的鏈接。

我建議您閱讀有關jQuery與Angular編碼差異的出色stackoverflow答案： 如果我有jQuery背景，則“在AngularJS中思考”？