AngularJS를 사용하여 브라우저 콘솔의 $scope 변수에 액세스하려면 어떻게 해야 합니까?
의 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★$scope
크롬 자바스크립트걸걸어 떻떻? ???
도 안 보인다$scope
.myapp
이치노
개발자 도구의 HTML 패널에서 요소를 선택하고 콘솔에 다음과 같이 입력합니다.
angular.element($0).scope()
WebKit 및 Firefox에서는$0
【[요소]에서 선택한 DOM 노드를 참조하기 위해 선택한 DOM 노드 스코프가 콘솔에 출력됩니다.
다음과 같이 요소 ID를 기준으로 스코프를 지정할 수도 있습니다.
angular.element(document.getElementById('yourElementId')).scope()
애드온/내선번호
Chrome 확장 기능에는 다음과 같은 유용한 기능이 있습니다.
jsFiddle을 가지고 놀다
jsfiddle을 사용할 때 다음을 추가하여 show 모드에서 바이올린을 열 수 있습니다./show
해 주세요.하면 ""에 할 수 .angular
을 사용하다
http://jsfiddle.net/jaimem/Yatbt/show
jQuery Lite
AngularJS 앞에 JS jQueryangular.element
jQuery 셀 j j j j j j j j j j j j j.를 조사할 수 .
angular.element('[ng-controller=ctrl]').scope()
단추의
angular.element('button:eq(1)').scope()
... 등등.
실제로 글로벌 함수를 사용하면 다음과 같은 작업을 쉽게 수행할 수 있습니다.
window.SC = function(selector){
return angular.element(selector).scope();
};
이제 넌 할 수 있어
SC('button:eq(10)')
SC('button:eq(10)').row // -> value of scope.row
http://jsfiddle.net/jaimem/DvRaR/1/show/ 를 참조해 주세요.
jm의 답변을 개선하려면...
// Access whole scope
angular.element(myDomElement).scope();
// Access and change variable in scope
angular.element(myDomElement).scope().myVar = 5;
angular.element(myDomElement).scope().myArray.push(newItem);
// Update page to reflect changed variables
angular.element(myDomElement).scope().$apply();
또는 jQuery를 사용하는 경우 동일한 기능을 수행합니다.
$('#elementId').scope();
$('#elementId').scope().$apply();
액세스하는 또 하나의 은 (설명한 바와 같이) "으로 "elements"로 저장됩니다.$0
.
angular.element($0).scope();
Batarang을 설치한 경우
그러면 다음과 같이 쓸 수 있습니다.
$scope
크롬의 요소 보기에서 요소를 선택한 경우.참조 - https://github.com/angular/angularjs-batarang#console
이것은 Batarang 없이 스코프를 취득하는 방법입니다.다음 작업을 수행할 수 있습니다.
var scope = angular.element('#selectorId').scope();
컨트롤러 이름으로 스코프를 찾으려면 다음 절차를 수행합니다.
var scope = angular.element('[ng-controller=myController]').scope();
모델을 변경한 후에는 다음과 같이 전화하여 변경 내용을 DOM에 적용해야 합니다.
scope.$apply();
컨트롤러 내 어딘가에 (종종 마지막 행이 좋은 장소입니다)
console.log($scope);
예를 들어 ng-repeat 내에서 내부/암시 스코프를 표시하고 싶은 경우 이와 같은 기능이 있습니다.
<li ng-repeat="item in items">
...
<a ng-click="showScope($event)">show scope</a>
</li>
그 후 컨트롤러에
function MyCtrl($scope) {
...
$scope.showScope = function(e) {
console.log(angular.element(e.srcElement).scope());
}
}
위의 show Scope() 함수는 부모 스코프에서 정의하지만 괜찮습니다.자녀/자녀/자녀 스코프는 해당 기능에 액세스할 수 있으며, 이 기능은 이벤트를 발생시킨 요소와 연관된 스코프를 기반으로 출력합니다.
@jm-의 제안도 효과가 있지만, jsFiddle에서는 효과가 없다고 생각합니다. Chrome 내부의 jsFiddle에서 다음 오류가 발생합니다.
> angular.element($0).scope()
ReferenceError: angular is not defined
답변의 중 하나는 입니다.scope()
.
컨트롤러 되어 있는 :<div ng-controller="FormController as frm">
후 then a a a a에 startDate
이라고 하는 은, 「컨트롤러」라고 하는 것입니다.angular.element($0).scope().frm.startDate
및 을 합니다.$($0)
됩니다.Angularjs는 jQuery lite를 사용합니다.
jQuery를 사용하지 않는 경우 다음과 같이 angular.element($0)를 사용할 수 있습니다.
angular.element($0).scope()
jQuery 및 버전이 있는지 확인하려면 콘솔에서 다음 명령을 실행합니다.
$.fn.jquery
요소를 검사한 경우 명령줄 API 참조 $0에서 현재 선택된 요소를 사용할 수 있습니다.Firebug와 Chrome 모두 이 레퍼런스를 가지고 있습니다.
그러나 Chrome 개발자 도구는 $0, $1, $2, $3, $4라는 이름의 속성을 통해 선택된 마지막 5개의 요소(또는 힙 개체)를 이러한 참조를 사용하여 사용할 수 있도록 합니다.가장 최근에 선택한 요소 또는 오브젝트는 $0으로 참조할 수 있으며, 두 번째 요소는 $1로 참조할 수 있습니다.
다음은 Firebug의 참조를 나열한 명령줄 API 참조입니다.
$($0).scope()
는 요소와 관련된 범위를 반환합니다.그 특성을 바로 알 수 있습니다.
그 밖에 사용할 수 있는 것은 다음과 같습니다.
- 요소의 상위 범위를 표시합니다.
$($0).scope().$parent
- 이것도 체인으로 할 수 있습니다.
$($0).scope().$parent.$parent
- 루트 스코프를 참조할 수 있습니다.
$($0).scope().$root
- 격리 스코프를 가지는 디렉티브를 강조 표시했을 경우는, 다음과 같이 확인할 수 있습니다.
$($0).isolateScope()
자세한 내용과 예는 낯선 Angularjs 코드를 디버깅하기 위한 힌트와 트릭을 참조하십시오.
라는 것에 $scope
오브젝트 선택 후 (와 동일)angular.element($0).scope()
jQuery를 사용하면 더 짧아집니다.$($0).scope()
(마음에 드는 것)
또한 나처럼 메인 스코프를 가지고 있다면body
요소, a$('body').scope()
정상적으로 동작합니다.
할당만 하면 됩니다.$scope
글로벌 변수로 사용됩니다.문제는 해결됐습니다.
app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
window.$scope = $scope;
}
우리는 실제로$scope
생산보다 개발 중인 경우가 더 많습니다.
@JasonGoemaat에 의해 이미 언급되었지만 이 질문에 대한 적절한 답변으로 추가합니다.
요소를 검사한 후 콘솔에서 사용합니다.
s = $($0).scope()
// `s` is the scope object if it exists
먼저 검사하려는 범위 내에 있는 요소를 DOM에서 선택할 수 있습니다.
그런 다음 콘솔에서 다음을 쿼리하여 스코프 개체를 볼 수 있습니다.
angular.element($0).scope()
스코프의 모든 속성을 쿼리할 수 있습니다. 예:
angular.element($0).scope().widgets
또는 스코프에 연결된 컨트롤러를 검사할 수 있습니다.
angular.element($0).scope().$myControllerName
(코드에 브레이크 포인트를 삽입하는 방법도 있습니다.이 경우,$scope
현재 plain old JavaScript' 범위에 있습니다.그러면 값을 검사할 수 있습니다.$scope
를 참조해 주세요).
사용한 적이 있다angular.element($(".ng-scope")).scope();
아주 효과가 있습니다.페이지에 앱 범위가 하나만 있거나 다음과 같은 작업을 수행할 수 있는 경우에만 좋습니다.
angular.element($("div[ng-controller=controllerName]")).scope();
또는angular.element(document.getElementsByClassName("ng-scope")).scope();
보통 jQuery data() 함수를 사용합니다.
$($0).data().$scope
$0은 현재 Chrome DOM 인스펙터에서 선택된 아이템입니다.$1, $2 등은 이미 선택된 아이템입니다.
다음과 같은 요소의 범위에 액세스하고 싶다고 합시다.
<div ng-controller="hw"></div>
콘솔에서 다음을 사용할 수 있습니다.
angular.element(document.querySelector('[ng-controller=hw]')).scope();
그러면 해당 요소의 스코프가 제공됩니다.
Chrome의 콘솔에서:
1. Select the **Elements** tab
2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
3. Type the command **angular.element($0).scope()** with following variable in the angular's scope
예
angular.element($0).scope().a
angular.element($0).scope().b
이를 위해서는 jQuery도 설치해야 하지만 개발 환경에서 완벽하게 작동합니다.각 요소를 조사하여 스코프의 인스턴스를 취득한 후 컨트롤러 이름으로 라벨이 지정된 요소를 반환합니다.또한 모든 속성을 삭제할 때는 일반적으로 angularjs가 설정에 사용하는 $로 시작합니다.
let controllers = (extensive = false) => {
let result = {};
$('*').each((i, e) => {
let scope = angular.element(e).scope();
if(Object.prototype.toString.call(scope) === '[object Object]' && e.hasAttribute('ng-controller')) {
let slimScope = {};
for(let key in scope) {
if(key.indexOf('$') !== 0 && key !== 'constructor' || extensive) {
slimScope[key] = scope[key];
}
}
result[$(e).attr('ng-controller')] = slimScope;
}
});
return result;
}
angular에서는 angular.filength()에 의해 jquery 요소를 얻을 수 있습니다.c...
angular.element().scope();
예:
<div id=""></div>
디버깅을 위해서만 컨트롤러의 시작 부분에 둡니다.
window.scope = $scope;
$scope.today = new Date();
그리고 이렇게 쓰죠.
디버깅이 끝나면 삭제합니다.
또, 다음과 같이 HTML 요소의 이름으로 스코프에 액세스 할 수 있습니다.angular.element(document.getElementsByName('onboardingForm'[0]).scope()
범위 밖에 있는 JavaScript 변수를 정의하고 컨트롤러 내의 스코프에 할당합니다.
var myScope;
...
app.controller('myController', function ($scope,log) {
myScope = $scope;
...
바로 그거야!모든 브라우저에서 작동해야 합니다(적어도 Chrome 및 Mozilla에서 테스트됨).
효과가 있고, 저는 이 방법을 사용하고 있습니다.
언급URL : https://stackoverflow.com/questions/13743058/how-do-i-access-the-scope-variable-in-browsers-console-using-angularjs
'source' 카테고리의 다른 글
UTF8 인코딩을 사용한 Excel to CSV (0) | 2023.02.06 |
---|---|
R을 해결할 수 없음 - Android 오류 (0) | 2023.02.06 |
Eclipse Android 플러그인의 "인증서 디버그 만료" 오류 (0) | 2023.02.06 |
Firebase를 위한 클라우드 기능에서의 CORS의 이니블화 (0) | 2023.02.06 |
Eclipse HotKey: 탭 간 전환 방법 (0) | 2023.02.06 |