lưu trữ hàng tháng: Tháng hai 2015

Trouble-Shooting Tip cho góc chỉ thị (Hoặc, Học tập cho tình yêu dấu gạch ngang tất cả hơn một lần nữa)

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:

image

Và sau đó nếu người dùng nhấp vào lỗi, họ xem thêm thông tin:

image

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 Nụ cười.  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>

undefinedĐăng ký vào blog của tôi.

Theo tôi trên Twitter lúc http://www.twitter.com/pagalvin

IE9 Thực sự không thích nó khi bạn có một phím tắt với của bạn <khoảng> Tags

Tôi đã rơi vào một thói quen xấu của việc sử dụng Chrome tất cả thời gian.  Nó là "xấu", vì những thứ tôi phát triển thực sự cần phải chạy trên rất nhiều trình duyệt web khác, bao gồm, thật đáng buồn IE8.  Máy tính xách tay công việc của tôi có tiêu chuẩn IE9 vì lý do gì) và tôi đã chỉ cần làm một cách nhanh chóng kiểm tra xem những gì những điều trông như và... nó không phải là đẹp.  Ví dụ::

image

Đô thị này có * nghĩ * để trông như thế này:

image

 

Không chỉ là nó ra, nhưng sự kiện nhấp chuột của tôi đã không bắn.  (Đa số, Dù sao).

Trực quan, nó trông giống như những thứ bắt đầu đi ra khỏi ray gần liên kết "Cài đặt nâng cao".  Tôi đào vào đó là một phần của HTML và thấy rằng tôi đã có dòng này:

<khoảng class = "glyphicon glyphicon--cửa sổ mới" />

Điều đó có vẻ như cho phép cú pháp ("Phiên bản chrome 40.02214.94 m"là tốt với nó). Tôi đã đi và thay đổi nó anyway, như được hiển thị:

<khoảng class = "glyphicon glyphicon--cửa sổ mới"></khoảng>

Cố định nó.

Một điều như vậy nhỏ ít gây ra một mess lớn của màn hình.  Thú vị lần.

Điều này xảy ra được một sửa chữa nhanh chóng, nhưng nó cũng là loại điều mà chỉ được cột sống của bạn ra khỏi sự liên kết khi bạn nhìn thấy nó.  Có hơn 500 dòng HTML này chức năng ít admin và bạn chỉ không muốn thấy mình đào giữa những cỏ dại, bao giờ Nụ cười.

</kết thúc>

undefinedĐăng ký vào blog của tôi.

Theo tôi trên Twitter lúc http://www.twitter.com/pagalvin