IMHO ประสบการณ์ที่น่าผิดหวังที่สุดมาจากการรับ / กำหนดค่าขอบเขตเฉพาะที่เกี่ยวข้องกับองค์ประกอบภาพ ฉันทำเบรกพอยต์จำนวนมากไม่เพียง แต่ในโค้ดของฉันเองเท่านั้น แต่ยังรวมถึง angular.js ด้วย แต่บางครั้งมันก็ไม่ใช่วิธีที่มีประสิทธิภาพมากที่สุด แม้ว่าวิธีการด้านล่างจะมีประสิทธิภาพมาก แต่ก็ถือว่าเป็นการปฏิบัติที่ไม่ดีอย่างแน่นอนหากคุณใช้ในรหัสการผลิตจริง ๆ ดังนั้นจงใช้อย่างชาญฉลาด!
รับการอ้างอิงในคอนโซลจากองค์ประกอบภาพ
ในเบราว์เซอร์ที่ไม่ใช่ IE จำนวนมากคุณสามารถเลือกองค์ประกอบได้โดยคลิกขวาที่องค์ประกอบแล้วคลิก "ตรวจสอบองค์ประกอบ" หรือคุณสามารถคลิกที่องค์ประกอบใดก็ได้ในแท็บองค์ประกอบใน Chrome เช่น องค์ประกอบที่เลือกล่าสุดจะถูกเก็บไว้ในตัวแปร$0ในคอนโซล
รับขอบเขตที่เชื่อมโยงกับองค์ประกอบ
ขึ้นอยู่กับว่ามีคำสั่งที่สร้างขอบเขตแยกคุณสามารถดึงขอบเขตโดยangular.element($0).scope()หรือangular.element($0).isolateScope()(ใช้$($0).scope()ถ้าเปิดใช้งาน $) นี่คือสิ่งที่คุณจะได้รับเมื่อคุณใช้ Batarang เวอร์ชันล่าสุด หากคุณกำลังเปลี่ยนค่าโดยตรงอย่าลืมใช้scope.$digest()เพื่อแสดงการเปลี่ยนแปลงบน UI
$ eval นั้นชั่วร้าย
ไม่จำเป็นสำหรับการดีบัก scope.$eval(expression)มีประโยชน์มากเมื่อคุณต้องการตรวจสอบอย่างรวดเร็วว่านิพจน์มีค่าที่คาดไว้หรือไม่
สมาชิกต้นแบบของขอบเขตที่หายไป
ความแตกต่างระหว่างscope.blaและscope.$eval('bla')เป็นอดีตไม่ได้พิจารณาถึงคุณค่าที่สืบทอดมาจากต้นแบบ ใช้ตัวอย่างด้านล่างเพื่อรับภาพรวม (คุณไม่สามารถเปลี่ยนค่าได้โดยตรง แต่คุณสามารถใช้ได้$evalต่อไป!)
scopeCopy = function (scope) {
var a = {};
for (x in scope){
if (scope.hasOwnProperty(x) &&
x.substring(0,1) !== '$' &&
x !== 'this') {
a[x] = angular.copy(scope[x])
}
}
return a
};
scopeEval = function (scope) {
if (scope.$parent === null) {
return hoho(scope)
} else {
return angular.extend({}, haha(scope.$parent), hoho(scope))
}
};
ใช้กับscopeEval($($0).scope()).
คอนโทรลเลอร์ของฉันอยู่ที่ไหน
บางครั้งคุณอาจต้องการตรวจสอบค่าngModelเมื่อคุณเขียนคำสั่ง ใช้$($0).controller('ngModel')และคุณจะได้รับการตรวจสอบ$formatters, $parsers, $modelValue, $viewValue $renderและทุกอย่าง