Tôi có một vài ứng dụng mà làm cho $http.get() cuộc gọi và tôi muốn để có thể để hiển thị một thông báo lỗi độc đáo được định dạng với chi tiết lỗi xấu xí ẩn, nhưng có thể truy cập. Về cơ bản, Điều này:
Và sau đó nếu người dùng nhấp vào lỗi, họ xem thêm thông tin:
Công cụ đơn giản. Kể từ khi chính xác cùng một tiềm năng lỗi có thể xuất hiện trong màn hình hành chính cũng như màn hình người dùng cuối, nó rõ ràng gọi là một chỉ thị góc tùy chỉnh. TÔI Các mặt hàng này xuất sắc loạt Bài viết (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) bởi đại Dan Wahlin. Theo lời khuyên của ông, Tôi rất nhanh chóng tạo ra một <Xin chào thế giới> chỉ thị và di chuyển trên của tôi squeegee lỗi hiển thị phức tạp hơn. Tôi chạy vào một chút rắc rối với chỉ thị này phức tạp hơn. Hạnh phúc, loại do cơ hội, Tôi đã nói với WebStorm (trình biên tập tôi sử dụng những ngày này) các tập tin JS là một tập tin góc và nó đã giúp tôi tìm ra vấn đề. Đây là mã cho chỉ thị chính nó:
angular.module("CDLApp").chỉ thị("generalCdlErrorHandler", chức năng() {
trở lại {
hạn chế: "E",
thay thế: sự thật,
phạm vi: {
retrieveLastConfigurationError: "&"
},
tiêu bản:
'<div class = "cảnh báo cảnh báo nguy hiểm" vai trò = "cảnh báo" ng-init = "doShowExpandedErrorDetails = true" ng Hiển thị = "retrieveLastConfigurationError()">' +
' Đã có một lỗi I/O hoặc lỗi khác. Điều này thường xảy ra bởi vì cấu hình dữ liệu tập tin có thể không ' +
' tìm thấy hoặc tập tin cấu hình chứa thông tin không chính xác (chẳng hạn như tham khảo một thư viện tài liệu ' +
' mà không tồn tại).' +
' <BR />' +
' <div ng-Hiển thị = "doShowExpandedErrorDetails">' +
' <một href = "#" ng nhấp chuột = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
'Bấm vào đây để ẩn chi tiết.' +
' </một>: ' +
' <BR />' +
' <trước>{{retrieveLastConfigurationError() | JSON}}</trước>' +
' <BR />' +
' </div>' +
' <div ng-Hiển thị = "!doShowExpandedErrorDetails">' +
' <một href = "#" ng nhấp chuột = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
'Bấm vào đây để mở rộng chi tiết lỗi.' +
' </một>' +
' </div>' +
'</div>'
};
});
Về cơ bản, Tôi là tạo ra một nguyên tố mới được gọi là một "generalCdlErrorHandler". Nó cần quyền truy cập vào một chức năng gọi là retrieveLastConfigurationError và đó được xử lý trong phạm vi đối tượng. Tôi có lẽ có thể chỉ cần sử dụng phạm vi của cha mẹ, nhưng mà cảm thấy lười biếng. Nếu bất cứ ai nghĩ rằng tôi nên đã làm được mà, Tôi rất thích nghe về nó trong các ý kiến.
Điều này là tốt rồi, nhưng tôi đã không nhận được bất cứ điều gì. Không có lỗi popped trong giao diện điều khiển (ít nhất một lần, tôi cố định tất cả các lỗi sx tôi tạo ra trên đường đi). Tôi chỉ đơn giản là đã không nhận được bất kỳ đầu ra từ chỉ thị. Tôi đã đi và thêm một số văn bản tĩnh trước khi chỉ thị về hiển thị và tôi * đã * nhận được rằng. Điều này làm cho tôi nghĩ rằng có lẽ chỉ thị không được phép để ngầm tạo mới vars như "doShowExpandedErrorDetails" hoặc có một "ng-init" trong đó.
Tôi đi trở lại vào HTML để xem nếu tôi có một loại và thời gian này WebStorm giúp tôi. Tôi đã đi qua trong các chức năng retrieveLastConfigurationError như thế này:
<Tổng-cdl-lỗi-xử lý retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</Tổng-cdl-lỗi-xử lý>
Nhưng nó thực sự cần thiết phải điều này:
<Tổng-cdl-lỗi-xử lý lấy-cuối-cấu hình-lỗi = "CDLController.retrieveLastConfigurationError()">
</Tổng-cdl-lỗi-xử lý>
WebStorm đã được thông minh, đủ để biết rằng nó đã được hyphenated. Nếu nó đã không cung cấp gợi ý rằng, Tôi sẽ có lẽ vẫn còn khắc phục sự cố này 
. Thú vị lần!
Bí quyết là đây: không chỉ yếu tố chỉ thị tên hyphenated, Vì vậy, là bất kỳ thuộc tính nào bạn thêm vào nó. Một khi tôi thêm các dấu gạch ngang, Tất cả làm việc rất lớn. Hướng dẫn của Dan đã xảy ra để sử dụng tên duy nhất ngắn, Vì vậy, tôi đã không làm cho các kết nối.
Hy vọng điều này sẽ giúp người nào đó.
</kết thúc>
Theo tôi trên Twitter lúc http://www.twitter.com/pagalvin
.