Angularjs:컨트롤러에서 요소 가져오기

Angularjs:컨트롤러에서 요소 가져오기

나는 angularjs를 처음이야, 난 알아.$scope컨트롤러와 뷰 사이의 연결을 나타냅니다. 하지만 찾는 것 외에 다른 방법이 있습니다.class="ng-scope"스코프 요소를 취득하는 것은, 다음과 같은 거죠.

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

동일한 컨트롤러를 여러 범위에 할당할 수 있다는 것을 알고 있기 때문에 가능하지 않을 수 있습니다.

스코프와 마찬가지로 요소를 컨트롤러에 전달할 수 있습니다.

function someControllerFunc($scope, $element){

}

$element지역 주민 네 명 중 한 명입니다$compileProvider주다$controllerProvider그런 다음, 이 정보는$injector. 인젝터는 요청 시에만 컨트롤러 기능에 로컬을 주입합니다.

4개의 현지인이 있습니다.

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

공식 문서:각진JS $compile Service API 참조 - 컨트롤러

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);

정확히 무슨 뜻인지 모르겠지만 도움이 되길 바라.
이 명령에 의해 컨트롤러 내부의 DOM 요소에 액세스 할 수 있습니다.
이것은 컨트롤러 내부의 요소에 초점을 맞추는 데 도움이 되는 샘플입니다.

.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];
        }
    };
})

이제 HTML 내부

<input scope-element="txtMessage" >

다음으로 내부 컨트롤러:

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

커스텀 디렉티브 작성

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

html 템플릿용 코드

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

컨트롤러의 기능

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

언급URL : https://stackoverflow.com/questions/21311401/angularjs-get-element-in-controller