4

DOMの操作はAngularのルールに反することは知っていますが、この場合、兄弟ノードを変更するためにDOMを横断する必要があります。

jQueryでは、次のようなことができます。

$（this）.parent（）。addClass（'。loading'）;

Angularにいる間、あなたはこのようなことをするでしょう：

angle.element（this）.parent（）。addClass（'。loading'）;

APIにはparent（）メソッドまたはaddClass（）メソッドのサポートがないため、これは確かに機能しません。

それは私に質問をもたらします、他にどのように私はこれを達成することができますか？

ありがとう！

4

2 に答える 2

8

Angular要素はデフォルトでjqLit​​eでラップされます（Angular独自のjQuery実装）。プロジェクトにjQueryを追加した場合、要素は完全なjQueryでラップされます。

jQuerylitehttp://docs.angularjs.org/api/angular.elementで使用できるメソッドのリストは次のとおりです。

ご覧のとおり、にアクセスできるためparent()、addClass()依存関係としてjQueryを追加しなくても、多くのDOM操作能力を利用できます。

-*-

角度を使用して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
        }
    };
});​​​​​​​​​​​​​

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

もちろん、アプリを構築するときは、それ自体の要素のみを操作するディレクティブが必要になる場合があります。

-*-

また、Markが言及しているようngClassに、独自のディレクティブを作成する代わりに、angularの既存のディレクティブを使用できます。何を達成したいのかは明確ではありませんが、ngCloakを確認することをお勧めします。

于 2012-11-12T03:29:21.193 に答える
3

jQueryでは、多くの場合、イベントトリガーがあり、イベントをトリガーした要素からDOMをトラバースして、操作される他の要素を見つけます。例：あなたの例：

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

AngularJSでは、最初に操作ポイントがHTMLのどこにあるかを宣言し（たとえば、@ bleshが示唆するようにng-class）、次にイベントが$ 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-showsのようなカスタムディレクティブが必要になります。

jQuery：イベントはDOMトラバーサルとDOM操作コードを駆動します（必須）。
Angular：イベントは$ scopeを変更し、魔法が起こります（宣言型HTMLで）。

于 2012-11-12T22:28:35.597 に答える