zu verwenden Ich habe ein paar Codebeispiele gesehen, wo $element is injected into an angular controller. Ich habe einige Zeit damit verbracht, eine Dokumentation für $ element zu finden, konnte aber keine offiziellen Dokumente finden.
Wofür wird der $ element-Dienst verwendet, wann sollte ich ihn verwenden und welche Best Practices gibt es dafür?
hilft Wenn Sie $element in einen Controller injizieren erhalten Sie eine JQlite Version des Elements gewickelt, dass der Controller gerufen von. Im Falle eines Weisungsbeauftragten wäre dies das Element, an dem die Richtlinie angebracht ist. Die einzige Erwähnung in den Dokumenten, die ich finden konnte, war unter der $compile description.
Sie, dass im folgenden Beispiel sehen:
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>Die beste Vorgehensweise ist, dass Sie alle DOM Änderungen nicht mit Ausnahme der in einer Richtlinie und noch spezieller typischerweise in die Link-Funktion. Da dies der Fall ist, möchten Sie fast nie die $element in einem Controller verwenden, weil das wahrscheinlich bedeutet, dass Sie die Lösung aus dem falschen Winkel nähern.
$element ist ein jqlite-Objekt (oder jQuery, wenn es verfügbar ist), das einen Verweis auf einige DOM-Objekte sowie einige hilfreiche Funktionen enthält, um mit ihnen zu interagieren. Jedes Mal, wenn Sie Änderungen am DOM vornehmen müssen, verwenden Sie $element.
Zum Beispiel ... Wenn Sie DOM eine Klasse Richtlinien hinzuzufügen, benötigt Objekt Sie $element injizieren würde und rufen
$element.addClass("my-class")
Sie in der Dokumentation können here
Eigentlich ist es kein Service , wird aber in einer Direktive verwendet (2. Argument in Link-Funktion).
Element ist das Element, dem die Direktive entspricht, und es ist ein jqLite-Objekt. Dies bedeutet, dass Sie jQuery-ähnliche Operationen ausführen können.
Sie können auch diesen Parameter $element oder element oder was auch immer Sie möchten.
finden Sie weitere Informationen in der offiziellen Dokumente finden:
https://docs.angularjs.org/guide/directive
Hoffnung, die
Ich habe einige Zeit damit verbracht, irgendeine Dokumentation für $ element zu finden, aber ich konnte keine in offiziellen Dokumenten finden.
$element ist eine von vier Einheimischen, dass $compileProvider zu $controllerProvider gibt, die dann zu $injector gegeben wird. Der Injektor injiziert lokal nur dann in Ihre Controller-Funktion, wenn Sie gefragt werden.
Die vier Einheimischen sind:
$scope$element$attrs$transcludeDie offizielle Dokumentation: AngularJS $compile Service API Reference - controller
Der Quellcode von 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);