web-dev-qa-db-fra.com

Angularjs: Obtenir un élément dans le contrôleur

Je suis nouveau dans angularjs, je sais que $scope représente une connexion entre le contrôleur et la vue. Mais existe-t-il un moyen en plus de rechercher class="ng-scope" pour obtenir l'élément scope?

function someControllerFunc($scope){
       $scope.element;
}

Je sais que le même contrôleur peut être affecté à plusieurs portées. Cela n’est donc peut-être pas possible.

javascriptangularjs
44
Aviel Fedida

Vous pouvez transmettre l'élément au contrôleur, tout comme la portée:

function someControllerFunc($scope, $element){

}
62
apohl

$element est l'une des quatre sections locales que $compileProvider donne à $controllerProvider, puis à $injector. L'injecteur injecte des variables locales dans la fonction de votre contrôleur uniquement si cela vous est demandé.

Les quatre sections locales sont:

  • $scope
  • $element
  • $attrs
  • $transclude

La documentation officielle: Référence d'API de service Compile AngularJS $ - contrôleur

Le code source de 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);
11
georgeawg

Je ne sais pas ce que vous entendez exactement, mais j'espère que cela vous aidera.
par cette directive, vous pouvez accéder à l'élément DOM à l'intérieur du contrôleur
Ceci est un exemple qui vous aide à focaliser un élément dans le contrôleur

.directive('scopeElement', function () {
    return {
        restrict:"A", // E-Element A-Attribute C-Class M-Comments
        replace: false,
        link: function($scope, elem, attrs) {
            $scope[attrs.scopeElement] = elem[0];
        }
    };
})

maintenant, en HTML 

<input scope-element="txtMessage" >

puis, à l'intérieur du contrôleur:

.controller('messageController', ['$scope', function ($scope) {
    $scope.txtMessage.focus();
}])
2
Sadegh Teimori

Créer une directive personnalisée

masterApp.directive('ngRenderCallback', function() {
    return {
        restrict: "A",
        link: function ($scope, element, attrs) {
            setTimeout(function(){ 
                $scope[attrs.ngEl] = element[0];
                $scope.$eval(attrs.ngRenderCallback);               
            }, 30);
        }
    }
});

code pour le modèle HTML

<div ng-render-callback="fnRenderCarousel('carouselA')" ng-el="carouselA"></div>

fonction dans le contrôleur

$scope.fnRenderCarousel = function(elName){
    $($scope[elName]).carousel();
}
0
Hitesh Dharecha