Tôi đã xem một vài ví dụ về mã nơi ở đây $element is injected into an angular controller. Tôi đã dành thời gian cố gắng tìm bất kỳ tài liệu nào cho $ element nhưng havent có thể tìm thấy bất kỳ tài liệu chính thức nào trong angulars.
Dịch vụ phần tử $ được sử dụng là gì, khi nào tôi nên sử dụng dịch vụ đó và các phương pháp hay nhất về việc sử dụng nó là gì?
Khi bạn tiêm $element vào một bộ điều khiển bạn nhận được một JQlite bọc phiên bản của nguyên tố này mà bộ điều khiển là gọi từ. Trong trường hợp của một bộ điều khiển chỉ thị, nó sẽ là bất kỳ phần tử nào mà chỉ thị được gắn vào. Chỉ đề cập đến trong tài liệu tôi có thể tìm thấy là theo số $compile description.
Bạn thể thấy rằng trong ví dụ sau:
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>Cách tốt nhất là bạn không thực hiện bất kỳ thay đổi DOM trừ trong một chỉ thị và thậm chí cụ thể hơn thông thường trong chức năng liên kết. Đó là trường hợp bạn hầu như không bao giờ muốn sử dụng $element trong một bộ điều khiển vì điều đó rất có thể có nghĩa là bạn đang tiếp cận giải pháp từ góc sai.
$element là một jqlite (hoặc jQuery nếu nó có sẵn) được bao bọc đối tượng chứa tham chiếu đến một số đối tượng DOM cũng như một số chức năng hữu ích để tương tác với chúng. Bất cứ khi nào bạn cần thay đổi DOM, bạn sẽ sử dụng $element.
Ví dụ ... Nếu bạn cần phải thêm một lớp học để một chỉ thị DOM đối tượng bạn sẽ bơm $element và gọi
$element.addClass("my-class")
Bạn có thể xem tài liệu here
Trên thực tế nó không phải là một dịch vụ , nhưng được sử dụng trong một chỉ thị (đối số thứ 2 trong hàm liên kết).
Phần tử là phần tử, mà chỉ thị khớp và là đối tượng jqLite, có nghĩa là bạn có thể thực hiện các thao tác giống như jQuery trên đó.
Ngoài ra, bạn có thể đặt tên cho thông số này $element hoặc element hoặc bất kỳ thứ gì bạn muốn.
Bạn sẽ tìm thấy nhiều thông tin trong các tài liệu chính thức:
https://docs.angularjs.org/guide/directive
Hy vọng rằng sẽ giúp
Tôi đã dành chút thời gian để tìm bất kỳ tài liệu nào cho $ element nhưng havent có thể tìm thấy bất kỳ tài liệu chính thức nào trong angulars.
$element là một trong bốn người dân địa phương mà $compileProvider ban cho $controllerProvider mà sau đó được trao cho $injector. Các vòi phun tiêm người dân địa phương trong chức năng điều khiển của bạn chỉ khi được hỏi.
Bốn người dân địa phương là:
$scope$element$attrs$transcludeCác tài liệu chính thức: AngularJS $compile Service API Reference - controller
Mã nguồn từ 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);