按摩與AngularJS

Question

我知道操縱DOM違背了角的規則，但在這種情況下，DOM，我有做橫向的DOM修改同級節點。

在jQuery中，你可以做這樣的事情：

$（本）.parent（）addClass（ '裝載'）; 。

雖然角，你會做這樣的事情：

angular.element（本）.parent（）addClass（ '裝載'）;

當然，這不起作用，因爲API上沒有parent（）方法或addClass（）方法支持。

這使我的問題，我還能怎麼做到這一點？

謝謝！

Answer 1

默認情況下（Angular自己的jQuery實現），角度元素包裝爲jqLit​​e。如果您已經添加了jQuery項目，那麼元素包裹着飽滿的jQuery。

這裏是可用的jQuery方法列表建興http://docs.angularjs.org/api/angular.element

正如你所看到的，您可以訪問parent()和addClass()所以，你得到了很多的DOM操作電源的W/O添加的jQuery的依賴。

- * -

這是完全沒有用的角度來操作DOM，最好的做法是從指令去做，這裏是一個具有訪問父元素

HTML

元素的一個小例子

<div ng-app='app'> 
    <div id="someparent"> 
     <div my-directive> 
     </div> 
    </div> 
</div> 

在您的JS

var app = angular.module('app', []); 


app.directive('myDirective', function(){ 
    return{ 
     restrict: 'A', 
     link: function(scope, element, attributes){ 
      console.log(element.parent().attr('id')); // "someparent" 
      element.parent().addClass('loading'); // adding loading class to parent 
     } 
    }; 
});​​​​​​​​​​​​​ 

Ĵ sfiddle：http://jsfiddle.net/jaimem/Efyv4/1/

當然，在構建應用程序時，您可能希望指令只操作其中的元素。

- * -

此外，馬克提到，您可以使用角度現有的指令，如ngClass而不是創建自己的。目前尚不清楚你想要達到什麼樣的，但我建議在看ngCloak。

Answer 2

在jQuery中，我們經常有一些事件觸發，然後從觸發事件的元素，我們遍歷DOM尋找一些其他的元素，然後操縱。例如，你的例子：

// some event causes this code to execute: 
$(this).parent().addClass('.loading'); 

在AngularJS，我們宣佈在操作點是HTML第一（例如，ng-class as @blesh表示），然後事件修改$ scope屬性，而Angular爲我們自動執行DOM操作。例如： -

<div ng-controller="MyCtrl" ng-class="loadingClass">parent 
    <a ng-click="loadingClass='loading'">child</a> 
</div> 

控制器：

function MyCtrl($scope) { 
    // if you want some other class initially, uncomment next line: 
    // $scope.loadingClass = 'notLoading'; 
}​ 

上方，點擊 「孩子」 鏈接修改$ scope.loadingClass。 Angular會注意到這個變化，並將新類應用到父div。

對於更復雜的操作，需要像@ jm-這樣的自定義指令。

jQuery：events驅動DOM遍歷和DOM操作代碼（勢在必行）。
Angular：事件修改$ scope並且發生奇蹟（在我們的聲明性HTML上）。