ฉันจะเข้าถึงตัวแปร $ scope ในคอนโซลของเบราว์เซอร์โดยใช้ AngularJS ได้อย่างไร

ฉันต้องการเข้าถึง$scopeตัวแปรของฉันในคอนโซล JavaScript ของ Chrome ฉันจะทำอย่างไร

ฉันไม่สามารถมองเห็น$scopeหรือชื่อของโมดูลmyappในคอนโซลเป็นตัวแปร

เลือกองค์ประกอบในแผง HTML ของเครื่องมือสำหรับนักพัฒนาและพิมพ์ในคอนโซล:

angular.element($0).scope()

ในWebKitและ Firefox$0เป็นการอ้างอิงถึงโหนด DOM ที่เลือกในแท็บองค์ประกอบดังนั้นเมื่อทำสิ่งนี้คุณจะได้รับขอบเขต DOM โหนดที่เลือกที่พิมพ์ออกมาในคอนโซล

นอกจากนี้คุณยังสามารถกำหนดเป้าหมายขอบเขตตามรหัสองค์ประกอบเช่น:

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

addons / ส่วนขยาย

มีส่วนขยาย Chrome ที่มีประโยชน์มากซึ่งคุณอาจต้องการดู:

• Batarang สิ่งนี้ได้รับรอบในขณะที่

• NG-สารวัตร นี่เป็นรุ่นใหม่ล่าสุดและตามชื่อแนะนำจะช่วยให้คุณตรวจสอบขอบเขตของแอปพลิเคชันของคุณ

เล่นกับ jsFiddle

เมื่อทำงานกับ jsfiddle คุณสามารถเปิดซอในโหมดแสดงโดยเพิ่ม/showที่ส่วนท้ายของ URL เมื่อทำงานเช่นนี้คุณจะสามารถเข้าถึงangularทั่วโลก คุณสามารถลองได้ที่นี่:

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

jQuery Lite

หากคุณโหลด jQuery ก่อน AngularJS angular.elementสามารถส่งผ่านตัวเลือก jQuery ดังนั้นคุณสามารถตรวจสอบขอบเขตของคอนโทรลเลอร์ด้วย

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();

อีกวิธีที่ง่ายต่อการเข้าถึงองค์ประกอบ DOM จากคอนโซล (ตามที่กล่าวถึง JM) คือการคลิกที่มันอยู่ในแท็บ 'องค์ประกอบ' $0และมันจะได้รับการจัดเก็บไว้เป็น

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

หากคุณติดตั้งBatarang

จากนั้นคุณสามารถเขียน:

$scope

เมื่อคุณมีองค์ประกอบที่เลือกในมุมมององค์ประกอบในโครเมี่ยม Ref - 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());
    }
}

โปรดทราบว่าเรากำหนดฟังก์ชัน showScope () ในขอบเขตของแม่ แต่ก็ไม่เป็นไร ... ขอบเขตลูก / ภายใน / โดยนัยสามารถเข้าถึงฟังก์ชั่นนั้นจากนั้นจะพิมพ์ขอบเขตตามเหตุการณ์และขอบเขตที่เกี่ยวข้องกับ องค์ประกอบที่ไล่เหตุการณ์

@ ข้อเสนอแนะของ jm-also ก็ใช้งานได้เช่นกันแต่ฉันไม่คิดว่ามันจะทำงานได้ใน jsFiddle ฉันได้รับข้อผิดพลาดนี้ใน jsFiddle ภายใน Chrome:

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

หนึ่งข้อแม้หลายคำตอบเหล่านี้: scope()ถ้าคุณนามแฝงควบคุมของคุณวัตถุขอบเขตของคุณจะอยู่ในวัตถุภายในวัตถุกลับมาจาก

ตัวอย่างเช่นหากคำสั่งควบคุมของคุณถูกสร้างขึ้นเช่น <div ng-controller="FormController as frm"> นั้นแล้วเพื่อเข้าถึงstartDateคุณสมบัติของตัวควบคุมของคุณคุณจะโทรangular.element($0).scope().frm.startDate

ฉันยอมรับสิ่งที่ดีที่สุดคือ Batarang ด้วย$scopeหลังจากเลือกวัตถุ (เหมือนกับangular.element($0).scope()jQuery: $($0).scope()(หรือที่ชื่นชอบ))

นอกจากนี้ถ้าชอบฉันคุณมีขอบเขตหลักในbodyองค์ประกอบการ$('body').scope()ทำงานที่ดี

ในการเพิ่มและปรับปรุงคำตอบอื่น ๆ ในคอนโซลให้ป้อน$($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 โดยใช้การอ้างอิงเหล่านี้ องค์ประกอบหรือวัตถุที่เลือกล่าสุดสามารถอ้างอิงได้เป็น $ 0 ซึ่งล่าสุดเป็นอันดับที่สองเป็น $ 1 และอื่น ๆ

นี่คือการอ้างอิง Command Line API สำหรับ Firebugที่แสดงรายการการอ้างอิง

$($0).scope()จะส่งคืนขอบเขตที่เกี่ยวข้องกับองค์ประกอบ คุณสามารถดูคุณสมบัติได้ทันที

สิ่งอื่น ๆ ที่คุณสามารถใช้ได้คือ:

• ดูขอบเขตพาเรนต์องค์ประกอบ:

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

• คุณสามารถโยงเรื่องนี้ด้วย:

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

• คุณสามารถดูขอบเขตของรูท:

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

• หากคุณเน้นคำสั่งด้วยขอบเขตแยกคุณสามารถดูได้ด้วย:

$($0).isolateScope()

ดูเคล็ดลับและเทคนิคสำหรับการดีบักโค้ด Angularjs ที่ไม่คุ้นเคยสำหรับรายละเอียดและตัวอย่างเพิ่มเติม

ตรวจสอบองค์ประกอบแล้วใช้สิ่งนี้ในคอนโซล

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

เพียงกำหนดให้$scopeเป็นตัวแปรทั่วโลก แก้ไขปัญหา.

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

เราต้องการ$scopeการพัฒนาบ่อยกว่าการผลิต

พูดถึงแล้วโดย @JasonGoemaat แต่เพิ่มเป็นคำตอบที่เหมาะสมสำหรับคำถามนี้

ฉันเคยใช้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 ถูกเลือกในตัวตรวจสอบ DOM ของ chrome $ 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

คอนโซลของ Chrome

สิ่งนี้ต้องการ jQuery ที่จะติดตั้งเช่นกัน แต่ทำงานได้อย่างสมบูรณ์แบบสำหรับสภาพแวดล้อม dev มันจะตรวจสอบแต่ละองค์ประกอบเพื่อรับอินสแตนซ์ของขอบเขตจากนั้นส่งคืนพวกเขาที่มีเลเบลด้วยชื่อตัวควบคุม มันยังเอาคุณสมบัติเริ่มต้นด้วย $ ซึ่งเป็นสิ่งที่ 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;
        }

ในเชิงมุมเราได้รับองค์ประกอบ jquery โดย angular.element () .... ช่วยให้ c ...

angular.element().scope();

ตัวอย่าง:

<div id=""></div>

สำหรับจุดประสงค์ในการดีบั๊กฉันใส่สิ่งนี้ไว้ที่จุดเริ่มต้นของคอนโทรลเลอร์

   window.scope = $scope;

  $scope.today = new Date();

และนี่คือวิธีที่ฉันใช้

จากนั้นลบเมื่อเสร็จสิ้นการดีบัก

วางเบรกพอยต์ในรหัสของคุณที่ใดที่หนึ่งใกล้กับการอ้างอิงถึงตัวแปร $ scope (เพื่อให้ $ scope อยู่ในขอบเขต 'ธรรมดาเก่า JavaScript') จากนั้นคุณสามารถตรวจสอบค่า $ scope ในคอนโซล

เพียงกำหนดตัวแปร JavaScript ที่อยู่นอกขอบเขตและกำหนดให้กับขอบเขตในคอนโทรลเลอร์ของคุณ:

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

แค่นั้นแหละ! ควรทำงานกับเบราว์เซอร์ทั้งหมด (ทดสอบอย่างน้อยใน Chrome และ Mozilla)

มันใช้งานได้และฉันใช้วิธีนี้