2014-11-25 4 views
0

컨트롤러 div 또는 컨트롤러 정의 div 에있는 div에 액세스 할 수있는 방법이 $ scope을 사용하여 class 및 id JUST로 정의하지 않아도됩니다.액세스 각도 컨트롤러 정의 요소

<div ng-controller="gridController"> 
    <div></div> // < -- I want to access this element 
</div> 

좀 더 구체적으로 각도 저장을 수행하고 ng 컨트롤러가 호출 된 요소 DOM 정보에 액세스 할 수 있습니까?

+0

실제로 무엇을하려고합니까? 당신이 묘사하는 것을 할 수있는 많은 방법이 있습니다. – jadarnel27

+0

첫 번째 div 또는 지정된 하나의 element.target에 액세스하려는 경우 – SamSamet

+0

좀 더 구체적으로 각도 저장을 수행하고 ng 컨트롤러가 호출 된 요소 DOM 정보에 대한 액세스 권한을 부여 하시겠습니까? – SamSamet

답변

0

당신은 당신의 컨트롤러에 각 변수 $element를 주입하여 컨트롤러에 정의 된 요소에 액세스 할 수 있습니다

angular.module('myApp') 
    .controller('SomeCtrl',['$scope', '$element', function($scope, $element) { 

    $scope.buttonClick = function() { 
    $element.find('div').css('background-color', '#f00'); 
    } 
}]); 

jQuery를이 프로젝트에 포함되어있는 경우, $element은 컨트롤러 인 요소의 jQuery를 객체가 될 것입니다 에 정의 된 (귀하의 예제에서 외부 div). 표준 jQuery 지시문을 사용하여 하위 요소에 액세스 할 수 있습니다. 익명의 하위 div에 액세스하려면 해당 위치를 알아야하거나 다른 기준을 사용하여 대상을 지정해야합니다.

jQuery가 설치되지 않은 경우 jQuery의 하위 집합 인 jqlite가 대부분의 jQuery 선택기를 사용하여 요소를 대상으로 할 수 있지만 대부분의 다른 조작 기능은 없습니다.

그러나 컨트롤러 내부에서 DOM에 액세스하고 특히 DOM을 조작하는 것은 일반적으로 좋지 않은 것으로 간주됩니다. jQuery가 html에 변수를 바인딩하는 방식 때문에 특정 함수에서 DOM을 변경하면 각도가 이러한 변경 사항을 선택하지 못하고 다음에 바인딩 사이클을 수행 할 때이를 덮어 쓸 수 있습니다. 이를 피하기 위해 대부분의 DOM 조작은 각도 지시문에서 수행해야합니다. 때로는 컨트롤러에서 처리하는 것이 더 쉽습니다 ...이 작업을 수행하려면 $apply$digest에 대해 알아야합니다.

+0

응답 해 주셔서 감사합니다. 그러나 응답을 편집하고 컨트롤러의 종속성 배열에 '$ element'를 추가해야합니다. – SamSamet

+0

잘 작동하는 솔루션을 시도했지만 라우팅 공급자를 통해 컨트롤러를 호출하고 알 수없는 공급자 오류를 처리하는 경우 어떻게 처리해야하는지 알 수 있습니까? – SamSamet

+0

아마 코드를 볼 필요가있을 것입니다. 이것은 별개의 질문처럼 들리 겠지만, 여러분의 편집에서 $ 요소를 주입 된 배열의 일부로 추가했지만 $ scope 변수를 포함하지 않았기 때문일 수 있습니다. 내 향상된 편집을 참조하십시오. – fluoresce

1

컨트롤러에는 DOM 개념이 없으므로 이런 식으로 유지하거나 테스트 할 수없는 코드를 작성할 위험이 매우 높습니다. 이것은 각 프레임 워크에서의 관심사 분리의 일부입니다. 컨트롤러는 여러 다른 엘리먼트에 바인딩되거나 심지어 다른 디렉티브의 컨트롤러 기능에 바인딩 될 수 있으며이를 구분할 방법을 알고있을 것입니다.

DOM에 대해 아무 것도 수행하지 않으려면 지침을 사용해야합니다.

에 대해 주어진 내용이인데,이 요소로 달성하고자하는 목표는 무엇입니까?