IMHO, trải nghiệm khó chịu nhất đến từ việc lấy / đặt giá trị của một phạm vi cụ thể liên quan đến yếu tố hình ảnh. Tôi đã thực hiện rất nhiều breakpoint không chỉ trong mã của riêng mình mà còn trong chính bản thân angle.js, nhưng đôi khi nó không đơn giản là cách hiệu quả nhất. Mặc dù các phương pháp dưới đây rất hiệu quả, nhưng chúng chắc chắn bị coi là hành vi xấu nếu bạn thực sự sử dụng trong mã sản xuất, vì vậy hãy sử dụng chúng một cách khôn ngoan!
Nhận tham chiếu trong bảng điều khiển từ phần tử hình ảnh
Trong nhiều trình duyệt không phải IE, bạn có thể chọn một phần tử bằng cách nhấp chuột phải vào một phần tử và nhấp vào "Kiểm tra phần tử". Ngoài ra, bạn cũng có thể nhấp vào bất kỳ phần tử nào trong tab Elements trong Chrome chẳng hạn. Phần tử được chọn mới nhất sẽ được lưu trữ trong biến $0trong bảng điều khiển.
Nhận một phạm vi được liên kết với một phần tử
Tùy thuộc vào việc có tồn tại một chỉ thị tạo một phạm vi cô lập hay không, bạn có thể truy xuất phạm vi bằng cách angular.element($0).scope()hoặc angular.element($0).isolateScope()(sử dụng $($0).scope()nếu $ được bật). Đây chính xác là những gì bạn nhận được khi sử dụng phiên bản Batarang mới nhất. Nếu bạn đang thay đổi giá trị trực tiếp, hãy nhớ sử dụng scope.$digest()để phản ánh các thay đổi trên giao diện người dùng.
$ eval là ác
Không nhất thiết để gỡ lỗi. scope.$eval(expression)rất tiện dụng khi bạn muốn nhanh chóng kiểm tra xem một biểu thức có giá trị mong đợi hay không.
Các thành viên nguyên mẫu còn thiếu của phạm vi
Sự khác biệt giữa scope.blavà scope.$eval('bla')cũ không xem xét các giá trị được kế thừa nguyên mẫu. Sử dụng đoạn mã dưới đây để có toàn bộ bức tranh (bạn không thể thay đổi trực tiếp giá trị, nhưng bạn vẫn có thể sử dụng $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))
}
};
Sử dụng nó với scopeEval($($0).scope()).
Bộ điều khiển của tôi ở đâu?
Đôi khi bạn có thể muốn theo dõi các giá trị ngModelkhi bạn đang viết một chỉ thị. Sử dụng $($0).controller('ngModel')và bạn sẽ nhận được để kiểm tra $formatters, $parsers, $modelValue, $viewValue $rendervà tất cả mọi thứ.