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 vào $scopebiến của mình 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 $scopetên của mô-đun myapptrong bàn điều khiển là biến.

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

angular.element($0).scope()

Trong WebKit và Firefox, $0là một tham chiếu đến nút DOM đã chọn trong tab phần tử, do đó, bằng cách này, bạn có đượ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ư vậy:

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

Addons / 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:

• Batagar . Đ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 mình.

Chơi với jsFiddle

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

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

jQuery Lite

Nếu bạn tải jQuery trước AngularJS, angular.elementcó thể được thông qua bộ chọn jQuery. Vì vậy, bạn có thể kiểm tra phạm vi của 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à như thế.

Bạn thực sự có thể muốn sử dụng một chức năng 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 tại đây: http://jsfiddle.net/jaimem/DvRaR/1/show/

Để 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, thì điều này cũng tương tự ...

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

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

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

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. Tham chiếu - https://github.com/angular/angularjs-batarang#console

Đây là một cách để có đượ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 theo tên của bộ điều khiển, hãy làm điều này:

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

Sau khi bạn thay đổi mô hình của mình, bạn sẽ cần áp dụng các thay đổi cho DOM bằng cách gọi:

scope.$apply();

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 / ẩn, hãy nói bên trong một lặp lại ng, một cái gì đó như thế này sẽ hoạt động.

<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 tôi xác định hàm showScope () trong phạm vi cha, nhưng không sao ... phạm vi con / bên trong / ẩn có thể truy cập vào hàm đó, sau đó in ra phạm vi dựa trên sự kiện và do đó phạm vi được liên kết với yếu tố đã kích hoạt sự kiện này.

Đề xuất của @ jm-cũng hoạt động, nhưng tôi không nghĩ rằng nó hoạt động 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

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

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

Tôi đồng ý tốt nhất là Batarang với nó $scopesau khi chọn một đối tượng (nó giống 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 bodyphần tử, một $('body').scope()hoạt động tốt.

Để thêm và nâng cao các câu trả lời khác, trong bảng điều khiển, hãy nhập $($0)để lấy phần tử. Nếu đó là một ứng dụng Angularjs, một phiên bản lite jQuery được tải theo mặc định.

Nếu bạn không sử dụng jQuery, bạn có thể sử dụng angular.element ($ 0) như trong:

angular.element($0).scope()

Để kiểm tra xem bạn có jQuery và phiên bản không, hãy chạy lệnh này trong bảng điều khiển:

$.fn.jquery

Nếu bạn đã kiểm tra một phần tử, phần tử hiện được chọn có sẵn thông qua tham chiếu API dòng lệnh $ 0. Cả Fireorms và Chrome đều có tài liệu tham khảo này.

Tuy nhiên, các công cụ dành cho nhà phát triển Chrome sẽ cung cấp năm yếu tố cuối cùng (hoặc đối tượng heap) được chọn thông qua các thuộc tính có tên $ 0, $ 1, $ 2, $ 3, $ 4 bằng cách sử dụng các tham chiếu này. Phần tử hoặc đối tượng được chọn gần đây nhất có thể được tham chiếu là $ 0, gần đây thứ hai là $ 1, v.v.

Dưới đây là tham chiếu API dòng lệnh cho Fireorms liệt kê các tham chiếu của nó.

$($0).scope()sẽ trả về phạm vi liên quan đến phần tử. Bạn có thể thấy tài sản của nó ngay lập tức.

Một số thứ khác mà bạn có thể sử dụng là:

• Xem một phạm vi cha mẹ yếu tố:

$($0).scope().$parent.

• Bạn cũng có thể xâu chuỗi này:

$($0).scope().$parent.$parent

• Bạn có thể nhìn vào phạm vi gốc:

$($0).scope().$root

• Nếu bạn đánh dấu một lệnh có phạm vi cô lập, bạn có thể xem nó với:

$($0).isolateScope()

Xem Mẹo và thủ thuật để gỡ lỗi Mã Angularjs không quen thuộc để biết thêm chi tiết và ví dụ.

Kiểm tra phần tử, sau đó sử dụng phần tử này trong bảng điều khiển

s = $($0).scope()
// `s` is the scope object if it exists

Chỉ cần gán $scopenhư một biến toàn cục. Vấn đề được giải quyết.

app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
    window.$scope = $scope;
}

Chúng tôi thực sự cần $scopethường xuyên hơn trong phát triển hơn là trong sản xuất.

Được đề cập bởi @JasonGoemaat nhưng thêm nó vào như một câu trả lời phù hợp cho câu hỏi này.

Tôi đã sử dụng angular.element($(".ng-scope")).scope();trong quá khứ và nó hoạt động rất tốt. Chỉ tốt nếu bạn chỉ có một phạm vi ứng dụng trên trang hoặc bạn có thể làm một cái gì đó như:

angular.element($("div[ng-controller=controllerName]")).scope(); hoặc là angular.element(document.getElementsByClassName("ng-scope")).scope();

Tôi thường sử dụng hàm jQuery data () cho điều đó:

$($0).data().$scope

$ 0 hiện đang được chọn trong mục kiểm tra DOM DOM. $ 1, $ 2 .. và vv là những mục được chọn trước đó.

Giả sử bạn muốn truy cập phạm vi của phần tử như

<div ng-controller="hw"></div>

Bạn có thể sử dụng như sau trong bảng điều khiển:

angular.element(document.querySelector('[ng-controller=hw]')).scope();

Điều này sẽ cung cấp cho bạn phạm vi tại yếu tố đó.

Tại bảng điều khiển của 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

Thí dụ

angular.element($0).scope().a
angular.element($0).scope().b

Bảng điều khiển của Chrome

Điều này đòi hỏi jQuery cũng phải được cài đặt, nhưng hoạt động hoàn hảo cho môi trường dev. Nó xem qua từng phần tử để lấy các thể hiện của phạm vi sau đó trả về chúng được gắn nhãn có tên của bộ điều khiển. Nó cũng loại bỏ bất kỳ thuộc tính nào bắt đầu bằng $, đó là những gì angularjs thường sử dụng cho cấu hình của nó.

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

trong góc, chúng ta có được phần tử jquery bằng angular.element () .... cho phép ...

angular.element().scope();

thí dụ:

<div id=""></div>

Để chỉ gỡ lỗi, tôi đặt cái này vào đầu bộ điều khiển.

   window.scope = $scope;

  $scope.today = new Date();

Và đây là cách tôi sử dụng nó.

sau đó xóa nó khi tôi gỡ lỗi xong.

Đặt một điểm dừng trong mã của bạn ở một nơi nào đó gần với tham chiếu đến biến $ scope (để phạm vi $ nằm trong phạm vi 'JavaScript cũ đơn giản' hiện tại). Sau đó, bạn có thể kiểm tra giá trị phạm vi $ trong bảng điều khiển.

Chỉ cần xác định một biến JavaScript bên ngoài phạm vi và gán nó cho phạm vi của bạn trong bộ điều khiển của bạn:

var myScope;
...
app.controller('myController', function ($scope,log) {
     myScope = $scope;
     ...

Đó là nó! Nó nên hoạt động trong tất cả các trình duyệt (được thử nghiệm ít nhất trong Chrome và Mozilla).

Nó đang hoạt động và tôi đang sử dụng phương pháp này.