요소에서 각도 Get 컨트롤러
Chrome의 콘솔을 통해 소자의 컨트롤러를 찾을 수 있는 방법이 있습니까?[ Elements Panel ]에서 요소를 선택하고 를 사용하여 컴포넌트에 대한 참조를 얻을 수 있습니다.
var c = angular.element($0);
c
가 있다controller
(컨스트럭터처럼 보이지만) 이걸 어떻게 해야 할지 모르겠어요.여기서 관제사 이름을 알 수 있는 방법이 있나요?
네가 한다면.angular.element($0).scope()
아니면 그냥$scope
(Batarang Chrome 확장을 설치한 경우) 선택한 요소의 기능 및 속성에 액세스할 수 있어야 합니다.여기에는 컨트롤러가 스코프에 공개한 모든 기능/속성도 포함되어야 합니다.
단, 컨트롤러의 이름을 알 수 있는 방법은 없습니다.
컨트롤러에 익명 함수를 사용하지 않는 경우 다음과 같은 기능을 사용할 수 있습니다.
angular.element(element).controller().constructor.name
코드펜 - http://codepen.io/jusopi/pen/jWYWzv?editors=101
적어도 Angular 1.2.27부터는 해당 설명서에 따라 이 작업을 수행할 수 있습니다."JQLite Extra Method" (JQLite Extra Method) 섹션 아래를 확인합니다.https://docs.angularjs.org/api/ng/function/angular.element
이것은 Angular 1.5의 컴포넌트와 함께 동작합니다.
다음과 같은 이름의 컴포넌트가 있다고 가정합니다.ProductViewComponent
에 의해 처리됩니다.ProductViewController
컨트롤러는 간단하게 입수할 수 있습니다.
angular.element("product-view").controller("productView")
비고:
- 요소 이름에 소문자와 대시 표시
- 컨트롤러 텍스트에 "Controller" 접미사가 없는 소문자.
예
이것으로, 예를 들면, 메서드를 호출할 수 있습니다.
angular.element("product-view").controller("productView").hasProducts();
또는 액션을 호출합니다!
angular.element("product-view").controller("productView").products = [ 'abc' ]
angular.element("product-view").scope().$apply()
@jusopi가 이미 지적했듯이 jqLite 추가 메서드를 사용할 수 있습니다.angular.element(element).controller(componentName)
:
[ it ]는 현재 요소의 컨트롤러 또는 상위 요소의 컨트롤러를 가져옵니다.기본적으로는 ngController 디렉티브와 관련된 컨트롤러를 가져옵니다.이름이 camelCase 디렉티브 이름으로 지정되면 이 디렉티브의 컨트롤러가 취득됩니다.
camelCase 에 디렉티브/컴포넌트명을 지정하면, 선택한 요소의 모든 디렉티브/컴포넌트의 특정 컨트롤러도 취득할 수 있습니다.
angular.element($0).controller('MyComponent')
($0은 요소 검사기의 최신 선택 항목입니다)
컨트롤러가 무엇인지 알고 싶을 경우(코드에 사용하지 않고 콘솔에만 사용할 수 있습니다.
달려.angular.element(element).controller().constructor
이 함수가 명명된 경우 이름을 볼 수 있습니다.(@jusopi에서 언급)
그렇지 않더라도 Chrome devtools(다른 툴도 포함)에 있는 경우 이름 없는 함수를 우클릭할 수 있습니다.
오른쪽 클릭 메뉴에서 "함수 정의 표시"를 선택합니다.
정의되어 있는 소스코드의 위치로 이동합니다.또, 그 컨텍스트로부터, 컨트롤러가 어떤 컨트롤러인지, 그 안에서 어떤 기능이 정의되어 있는지를 알 수 있습니다.
언급URL : https://stackoverflow.com/questions/21995108/angular-get-controller-from-element
'programing' 카테고리의 다른 글
예상되는 할당 또는 함수 호출: no-used-expressions ReactJS (0) | 2023.02.28 |
---|---|
Wordpress에서 SQL 주입을 방지하는 방법 (0) | 2023.02.28 |
JavaScript를 통해 동적으로 JSON 객체 생성(구체 문자열 없음) (0) | 2023.02.28 |
여러 값 중 하나를 가진 속성별 Angular.js ng-repeat 필터(값의 OR) (0) | 2023.02.28 |
워드프레스 플러그인의 테이블에 다른 열 추가 (0) | 2023.02.23 |