Angularの$要素を使用する場合

いくつかのコード例を見てきましたが、ここでは$element is injected into an angular controllerです。私はいくつかの時間を費やして$ elementのドキュメントを探しましたが、角度の公式ドキュメントを見つけることはできませんでした。

どのような$要素サービスを使用するのですか？いつ使用するべきですか？その使用法に関するベストプラクティスは何ですか？

出典

2015-12-18 elliot-j

を助けコントローラがあることを要素のバージョンを包んから呼ばれた。ディレクティブコントローラの場合、ディレクティブがどの要素にアタッチされていても構いません。私が見つけることができる文書の唯一の言及は$compile descriptionの下にあった。あなたは、次の例ではそれを見ることができます

は：

angular.module('myApp', []) 
 
    .controller('testCtrl', function($scope, $element) { 
 
    console.log($element); 
 
    }) 
 
    .directive('testDirective', function() { 
 
    return { 
 
     controller: function($scope, $element) { 
 
     console.log($element); 
 
     } 
 
    } 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp"> 
 
    <div ng-controller="testCtrl" id="controller">Controller</div> 
 
    <div test-directive id="directive">Directive</div> 
 
</body>

のベストプラクティスを使用すると、さらに具体的には、通常でディレクティブで以外の任意のDOMの変更を行っていないということですリンク機能コントローラの中で$elementを使用することはほとんどありません。間違った角度から解決策に近づいている可能性が最も高いからです。

出典

2015-12-18 17:19:22

$elementは、いくつかのDOMオブジェクトへの参照を含むjqlite（またはjQueryが利用可能であれば）ラップされたオブジェクトであり、それらと対話するための便利な機能です。 DOMを変更する必要があるときは、いつでも$elementを使用します。例えば

...あなたはDOMは、あなたが$elementを注入し、

$element.addClass("my-class")

を呼び出しますオブジェクトのディレクティブにクラスを追加するために必要な場合は、それがサービスではないのドキュメント実はhere

出典

2015-12-18 17:03:43 Marie

を見ることができますディレクティブ（リンク関数の第2引数）で使用されます。

要素は、ディレクティブと一致し、jqLiteオブジェクトであるため、jQueryライクな操作を実行できることを意味します。

また、このパラメータには$elementまたはelementなどの名前を付けることができます。

あなたは公式ドキュメントでより多くの情報を見つける：

https://docs.angularjs.org/guide/directive

希望あなたがJQliteを取得し、コントローラに$elementを注入すると

出典

2015-12-18 17:05:44

私は$ elementのドキュメントを探してみるのに時間を費やしましたが、角度の公式ドキュメントでは何も見つかりませんでした。

$elementはその後$injectorに与えられます$compileProviderが$controllerProviderに与える4人の地元の人々の一つです。インジェクタは、質問された場合に限り、コントローラ機能にローカルをインジェクトします。

4地元の人々は、以下のとおりです。

$scope
$element
$attrs
$transclude

公式ドキュメント：AngularJS $compile Service API Reference - controller

ソースコードはGithub angular.js/compile.js：

function setupControllers($element, attrs, transcludeFn, controllerDirectives, isolateScope, scope) { 
    var elementControllers = createMap(); 
    for (var controllerKey in controllerDirectives) { 
     var directive = controllerDirectives[controllerKey]; 
     var locals = { 
     $scope: directive === newIsolateScopeDirective || directive.$$isolateScope ? isolateScope : scope, 
     $element: $element, 
     $attrs: attrs, 
     $transclude: transcludeFn 
     }; 

     var controller = directive.controller; 
     if (controller == '@') { 
     controller = attrs[directive.name]; 
     } 

     var controllerInstance = $controller(controller, locals, true, directive.controllerAs);

出典

2015-12-21 01:12:13 georgeawg

Angularの$要素を使用する場合

答えて

関連する問題