對於角指令的故障排除提示 (或, 學會愛連字號)

我有幾個應用程式,使 $HTTP.get() 電話和我想要成為能夠與醜陋的錯誤詳細資訊隱藏顯示格式化的錯誤訊息, 但訪問。  基本上, 這:

image

然後如果使用者點擊錯誤, 他們看到更多的資訊:

image

簡單的東西。  因為同樣的潛在錯誤可以出現在行政螢幕,以及最終使用者螢幕, 它清楚地叫自訂角指令。  我  發現了這個 優秀的系列 文章 (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) 由偉大 丹 Wahlin.  聽從他的建議, 我很快創建了 <你好世界> 指令,來到我更複雜的錯誤顯示刮板. 我跑進一點麻煩用這個更複雜的指令。  快樂, 偶然的排序, 我已經告訴 WebStorm (我用這些天的編輯器) JS 檔是一個角的檔,它説明我弄清楚這個問題。  這是指令本身的代碼:

angular.module(""CDLApp).指令(""generalCdlErrorHandler, 功能() {

返回 {
限制: "E",
替換: 真正的,

範圍: {
retrieveLastConfigurationError: "&"
},

範本:
'<div 類 ="警戒警報危險" 角色 ="警報" 吳 init ="doShowExpandedErrorDetails = true" 吳秀 ="retrieveLastConfigurationError()">' +
' 沒有輸入/輸出錯誤或其他錯誤. 這通常是因為配置資料檔案不能 ' +
' 發現或設定檔中包含不准確的資訊 (如引用文件庫 ' +
' 不存在).' +
' <br />' +
' <div 吳秀 ="doShowExpandedErrorDetails">' +
' <href ="#" 吳按一下 ="doShowExpandedErrorDetails = ! "doShowExpandedErrorDetails>' +
按一下此處以隱藏詳細資訊。 +
' </一>: ' +
' <br />' +
' <預>{{retrieveLastConfigurationError() | json}}</預>' +
' <br />' +
' </div>' +
' <div 吳秀 ="!"doShowExpandedErrorDetails>' +
' <href ="#" 吳按一下 ="doShowExpandedErrorDetails = ! "doShowExpandedErrorDetails>' +
按一下這裡可以展開錯誤詳細資訊。 +
' </一>' +
' </div>' +
'</div>'
};
});

基本上, 我創建了一個新的元素被稱為"generalCdlErrorHandler"。  它需要調用 retrieveLastConfigurationError 函數訪問,這處理的範圍物件中。  我大概可以用父範圍, 但我感覺這懶惰。  如果有人認為我應該這樣做, 我很樂意聽到關於它的評論.

這是一切都好, 但我沒有得到任何東西。  沒有錯誤彈出在主控台中 (至少一次,我修好了我創建了沿途的所有 sx 錯誤).  我只是沒得到任何輸出指令。  又添加了一些靜態文本吳秀指令然後 * 做 * 明白. 這讓我覺得或許該指令不允許隱式地創建新的 var,像"doShowExpandedErrorDetails"或有"吳 init"在那裡。 

我走進 html 代碼,看看是否我有一種類型,這一次 WebStorm 為我排憂解難。  像這樣的 retrieveLastConfigurationError 函數中過:

<一般 cdl 錯誤處理常式 retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</一般 cdl 錯誤處理常式>

但它真的需要擁有這一切:

<一般 cdl 錯誤處理常式檢索最後一個配置錯誤 ="CDLController.retrieveLastConfigurationError()">
</一般 cdl 錯誤處理常式>

WebStorm 很聰明,知道它將要斷字。  如果它沒有提供暗示, 我將可能會仍然來進行故障排除 微笑.  有趣的時代!

訣竅就是這: 不僅是指導元素名稱用連字號連接, 因此,是你向它添加任何屬性。  我有一次添加連字號, 這一切工作得非常棒。  丹的教程碰巧使用單一的短名稱, 沒有使連接.

希望這有助於人.

</結束>

undefined訂閱我的博客.

跟我在 Twitter 上 http://www.twitter.com/pagalvin

留言

您的電子郵件地址不會被公開. 必需的地方已做標記 *