对于角指令的故障排除提示 (或, 学会爱连字符)

我有几个应用程序,使 $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",
替换: true,

范围: {
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

留言

您的电子邮件地址不会被公开. 必需的地方已做标记 *