2

私はこの単純な jsfiddle を書き、ng-repeat のディレクティブで基本的な addClass を (成功して) 実行しました。

http://jsfiddle.net/rv6u2/5/

さて、私の質問は次のとおりです。そのようなDOM操作を行うのに最適な(または意図された)場所は次のとおりです。

A.指令で?

B. コントローラーで?

私の例では、両方の可能性が示されています。

コード:

var TestApp = angular.module("TestApp", ['ngResource']);
TestApp.directive('onLoad', function() {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            elm.addClass('loaded'); // A: DOM manipulation in directive
            scope.initMe(scope.$eval(attrs.onLoad2), elm); // B: DOM manipulation handled in controller
        }
    };
});

前もって感謝します :)

4

2 に答える 2

6

コントローラー内でdomを操作しないでください。

コントローラーは、サービスを使用して $scope の属性を更新する必要があります。すべての DOM 操作は、ディレクティブおよび (場合によっては) サービス (例: $anchorScroll )によって行う必要があります。

ここでangularjsの概念を参照してください

更新:ここでの正しい方法の例

于 2012-10-14T18:57:08.780 に答える
2

クラスloaded2を設定するより「角度のある方法」は次のようになります(これにより、コントローラー内でのDOM操作が回避されます)。

HTMLで、クラス(myClass)のモデルを宣言します。

<div ng-repeat="item in items" ng-model="item" on-load="initMe(item)" ng-class="myClass">

リンク関数で、コントローラーメソッドを呼び出すだけです。

scope.initMe()

コントローラで、model /$scopeプロパティを操作します。

$scope.initMe = function() {
   $scope.myClass = "loaded2";
}

モデル/スコープを変更すると、ビューが自動的に更新されます。

このメソッドは、クラスが$scopeプロパティmyClassによって制御されていることをHTMLで宣言する場合に役立ちます。ただし、リンク関数内でelm.addClass()を使用すると、自己完結型になり、保守が容易になります(そして、私はそのアプローチの方が好きです)。

于 2012-10-16T15:50:51.407 に答える