Câu hỏi Làm cách nào để truy cập biến $ scope trong bảng điều khiển của trình duyệt bằng AngularJS?


Tôi muốn truy cập $scope biến trong bảng điều khiển JavaScript của Chrome. Làm thế nào để làm điều đó?

Tôi không thể thấy $scope cũng không phải tên của mô-đun của tôi myapp trong bảng điều khiển dưới dạng biến.


1126
2017-12-06 11:52


gốc


Để gỡ lỗi tôi thường đặt window.MY_SCOPE = $scope; điều đầu tiên trong chức năng điều khiển của tôi. - Jason Goemaat
Nếu bạn đang cân nhắc việc phát triển / thử nghiệm trong Firefox, bạn cũng có thể sử dụng AngScope, một tiện ích nhỏ hiển thị $scope đối tượng của các phần tử DOM đã chọn vào Trình theo dõi DOM của Firebug. - Kos Prov
@JasonGoemaat tại sao không sử dụng cửa sổ. $ Scope = $ scope; để bạn có thể chỉ cần sử dụng $ scope thay vì MY_SCOPE - tôi đã không nhận thấy bất kỳ vấn đề nào nhưng có lẽ tôi đang thiếu một mối quan tâm bảo mật hoặc một cái gì đó. - James Gentes
Chỉ cần cho rõ ràng, một người mới đến góc có thể bị lẫn lộn và nghĩ rằng phạm vi $ là kỳ diệu có sẵn trong giao diện điều khiển nếu chỉ thấy nó được sử dụng theo cách đó. Ngoài ra nếu bạn sau đó nhầm lẫn sử dụng phạm vi trong một khai báo chỉ thị và $ phạm vi trong mã ví dụ, bạn sẽ được sử dụng mà trên đối tượng cửa sổ thay vì nhận được một lỗi. - Jason Goemaat


Các câu trả lời:


Chọn một phần tử trong bảng điều khiển HTML của các công cụ dành cho nhà phát triển và nhập điều này vào bảng điều khiển:

angular.element($0).scope()

Trong WebKit và Firefox, $0 là tham chiếu đến nút DOM đã chọn trong tab phần tử, do đó, bằng cách thực hiện điều này, bạn sẽ nhận được phạm vi nút DOM đã chọn được in ra trong bảng điều khiển.

Bạn cũng có thể nhắm mục tiêu phạm vi theo ID phần tử, như sau:

angular.element(document.getElementById('yourElementId')).scope()

Tiện ích / Tiện ích mở rộng

Có một số tiện ích mở rộng Chrome rất hữu ích mà bạn có thể muốn xem:

  • Batarang. Điều này đã được khoảng một thời gian.

  • ng-thanh tra. Đây là cái mới nhất, và như tên cho thấy, nó cho phép bạn kiểm tra phạm vi ứng dụng của bạn.

Chơi với jsFiddle

Khi làm việc với jsfiddle bạn có thể mở fiddle trong chỉ chế độ bằng cách thêm /show ở cuối URL. Khi chạy như thế này bạn có quyền truy cập vào angular toàn cầu. Bạn có thể thử ở đây:

http://jsfiddle.net/jaimem/Yatbt/show

jQuery Lite

Nếu bạn tải jQuery trước AngularJS, angular.element có thể được thông qua một bộ chọn jQuery. Vì vậy, bạn có thể kiểm tra phạm vi của một bộ điều khiển với

angular.element('[ng-controller=ctrl]').scope()

Của một nút

 angular.element('button:eq(1)').scope()

... và vân vân.

Bạn có thể thực sự muốn sử dụng một hàm toàn cầu để làm cho nó dễ dàng hơn:

window.SC = function(selector){
    return angular.element(selector).scope();
};

Bây giờ bạn có thể làm điều này

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

Kiểm tra ở đây: http://jsfiddle.net/jaimem/DvRaR/1/show/


1618
2017-12-06 12:56



Cảm ơn. Khi tôi cố gắng cài đặt Batarang nó cho tôi biết máy tính của bạn không được hỗ trợ, tôi có ubuntu, bất kỳ ý tưởng nào? - murtaza52
@ jm- kể từ angular.element($0).scope(), nó hoạt động cho đến khi bạn cố gắng gọi một số phương thức. Tôi đã thử, và vì một lý do nào đó, không có yêu cầu HTTP nào có thể trong thiết lập này? - krtek
Với chrome trong jsfiddle, bạn có thể vào khung hiển thị với menu thả xuống ở cuối cửa sổ. Thông thường nó nói <top frame> và bạn muốn chọn result( fiddle.jsshell.net/ ) để có giao diện điều khiển trong ngữ cảnh của khung đang chạy. - Jason Goemaat
Lưu ý rằng nếu bạn vô hiệu hóa thông tin gỡ lỗi, bạn sẽ luôn luôn nhận được không xác định bằng cách sử dụng phương pháp này. Đây là dự định và có thể được ngăn chặn bởi .. .well, không vô hiệu hoá thông tin gỡ lỗi trên $ compileProvider - Robba
thay thế cho angular.element ($ 0) .scope (): bạn cũng có thể làm $ ($ 0) .scope () - user2954463


Để cải thiện câu trả lời của 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();

Hoặc nếu bạn đang sử dụng jQuery, điều này cũng giống như vậy ...

$('#elementId').scope();
$('#elementId').scope().$apply();

Một cách dễ dàng khác để truy cập phần tử DOM từ giao diện điều khiển (như được đề cập đến jm) là nhấp vào nó trong tab 'elements' và nó tự động được lưu trữ như $0.

angular.element($0).scope();

173
2018-04-02 04:49



góc có chứa một tập con của jquery, vì vậy bạn luôn có thể sử dụng cú pháp sau (nếu nó là chính xác), tôi không chắc chắn nó là - Pizzaiola Gorgonzola
Tôi đã kết thúc với angular.element(document.body).scope(), cảm ơn bạn! - Alex Sorokoletov


Nếu bạn đã cài đặt Batarang

Sau đó, bạn chỉ có thể viết:

$scope

khi bạn có phần tử được chọn trong chế độ xem phần tử trong chrome. Ref - https://github.com/angular/angularjs-batarang#console


70
2017-09-06 16:36





Đây là một cách để nhận được phạm vi mà không có Batarang, bạn có thể làm:

var scope = angular.element('#selectorId').scope();

Hoặc nếu bạn muốn tìm phạm vi của mình bằng tên bộ điều khiển, hãy thực hiện điều này:

var scope = angular.element('[ng-controller=myController]').scope();

Sau khi bạn thực hiện thay đổi đối với mô hình của mình, bạn cần áp dụng các thay đổi cho DOM bằng cách gọi:

scope.$apply();

32
2018-06-04 17:02



Câu trả lời này có quá nhiều upvotes như thế nào? Bạn không cần jQuery cho việc này! angular.element đã là một phương pháp chọn phần tử. Ngừng nói rằng bạn cần jQuery cho các tác vụ đơn giản như chọn một phần tử theo id của nó! - Tyrsius
Tôi không nói bạn cần nó. Những gì tôi đang nói là nếu bạn đã có nó ở đó, bạn có thể sử dụng nó như thế này. - BraveNewMath
angular.element  đã làm điều bạn đang sử dụng jQuery cho. Trong thực tế, nếu jQuery có sẵn angular.element là một bí danh cho jQuery. Bạn đang không cần thiết làm phức tạp mã của bạn. angular.element('#selectorId') và angular.element('[ng-controller=myController]') làm điều tương tự, chỉ với ít mã hơn. Bạn cũng có thể gọi angular.element('#selectorId'.toString()) - Tyrsius
@Tyrsius, có lẽ phản hồi của bạn có thể ít bị buộc tội và tức giận và chuyên nghiệp hơn một chút? - Tass
@ Tass Bạn nói đúng, tôi đã vô dụng thô lỗ. Tôi xin lỗi. Nó là đủ để nói rằng cùng một điều đang được thực hiện hai lần. - Tyrsius


Một nơi nào đó trong bộ điều khiển của bạn (thường là dòng cuối cùng là một nơi tốt), đặt

console.log($scope);

Nếu bạn muốn xem một phạm vi bên trong / tiềm ẩn, hãy nói bên trong một ng-lặp lại, một cái gì đó như thế này sẽ làm việc.

<li ng-repeat="item in items">
   ...
   <a ng-click="showScope($event)">show scope</a>
</li>

Sau đó, trong bộ điều khiển của bạn

function MyCtrl($scope) {
    ...
    $scope.showScope = function(e) {
        console.log(angular.element(e.srcElement).scope());
    }
}

Lưu ý rằng ở trên chúng ta định nghĩa hàm showScope () trong phạm vi cha, nhưng không sao ... phạm vi con / bên trong / ngầm có thể truy cập hàm đó, sau đó in ra phạm vi dựa trên sự kiện và do đó phạm vi liên kết với yếu tố đã kích hoạt sự kiện.

Đề xuất của @ jm-cũng hoạt động, nhưng tôi không nghĩ rằng nó hoạt động bên trong một jsFiddle. Tôi gặp lỗi này trên jsFiddle bên trong Chrome:

> angular.element($0).scope()
ReferenceError: angular is not defined


28
2017-12-06 21:16





Một báo trước cho nhiều câu trả lời sau: nếu bạn đặt tên cho bộ điều khiển, đối tượng phạm vi của bạn sẽ nằm trong đối tượng trong đối tượng được trả về từ scope().

Ví dụ, nếu chỉ thị điều khiển của bạn được tạo ra như sau: <div ng-controller="FormController as frm"> sau đó truy cập startDate tài sản của bộ điều khiển của bạn, bạn sẽ gọi angular.element($0).scope().frm.startDate


9
2018-02-24 04:00



Bộ điều khiển Là có thể truy cập để xem (do đó để bàn điều khiển) như là một tài sản của $scope, có tên $ctrl theo mặc định, độc lập cho dù bạn đổi tên nó bằng cách sử dụng controllerAs hay không. Tôi không hiểu bạn đã thấy ở đâu "báo trước" trong câu trả lời hiện có. Lưu ý hầu hết các câu trả lời ở đây đã được cung cấp khi controllerAs không phải là một thực tế phổ biến. - Andrei Gheorghiu
Đúng. Khi những câu trả lời đó được đưa ra, controllerAs không phải là thực tế phổ biến, do đó, nó đã được gây nhầm lẫn cho người mới có thể đã được sau một "sách dạy nấu ăn" đã nói với họ để bí danh bộ điều khiển, nhưng sau đó không nhìn thấy các tài sản mà không sử dụng bí danh. Mọi thứ diễn ra nhanh chóng hai năm trước. - Michael Blackburn


Tôi đồng ý tốt nhất là Batarang với nó $scope sau khi chọn một đối tượng (nó giống như angular.element($0).scope() hoặc thậm chí ngắn hơn với jQuery: $($0).scope() (yêu thích của tôi))

Ngoài ra, nếu như tôi bạn có bạn phạm vi chính trên body yếu tố, một $('body').scope() hoạt động tốt.


8
2018-01-23 23:54