У мене є кілька застосунків, що зробити $http.get() дзвінки і я хотів мати можливість показати красиво відформатованих помилка повідомлення з потворною помилка деталі приховані, але доступним. В основному, Це:
А потім, якщо користувач натискає на помилку, вони бачать Детальніше:
Прості речі. Оскільки точне ж потенційні повідомлення про помилку може з'явитися в адміністративних екрану, а також кінцевий користувач екран, Він чітко закликав до настроюваного кутових директиви. Я знайшов це видатного серіалу статей (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) за великого Ден Wahlin. Після його поради, Я створив дуже швидко <Привіт світ> Директива і переїхав до мого складніші помилка відображення Ракель. Я побіг до трохи неприємностей з цього більш складні директиви. На щастя, Сортувати за шанс, Я розповів WebStorm (редактор, я використовую ці дні) що JS файл був кутовий файл, і це допомогло мені з'ясувати питання. Це код для себе Директива:
angular.Module("CDLApp").Директива("generalCdlErrorHandler", функція() {
повернення {
обмежити: "Е",
замінити: Істина,
Сфера: {
retrieveLastConfigurationError: "&"
},
Шаблон:
'<DIV клас = "Оповіщати оповіщення небезпеки" роль = "оповіщення" нг init = "doShowExpandedErrorDetails = true" NG шоу = "retrieveLastConfigurationError()">' +
"Там була помилка вводу-виводу або інші помилки. Зазвичай це відбувається тому, що файл даних конфігурації не вдалося ' +
' знайшов або конфігураційний файл містить неточної інформації (Наприклад, посилання на бібліотеку документів ' +
"це не існує).' +
' <br />' +
' <DIV ng шоу = "doShowExpandedErrorDetails">' +
' <href = "#" нг клацніть = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
'Натисніть тут, щоб приховати подробиці.' +
' </на>: ' +
' <br />' +
' <попередньо>{{retrieveLastConfigurationError() | JSON}}</попередньо>' +
' <br />' +
' </DIV>' +
' <DIV ng шоу = "!doShowExpandedErrorDetails">' +
' <href = "#" нг клацніть = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
"Натисніть тут, щоб розгорнути відомості про помилку." +
' </на>' +
' </DIV>' +
'</DIV>'
};
});
В основному, Я створюю новий елемент під назвою "generalCdlErrorHandler". Вона потребує доступу до функції, яка називається retrieveLastConfigurationError і що обробляються в рамки об'єкта. Я ймовірно може просто використовували батьків у сферу, але це відчуває ледачий. Якщо хтось думає, що я повинен зробив, що, Мені б дуже хотілося почути про це в коментарях.
Це було добре, але я не отримую, що-небудь. Без помилок, вискочив в консолі (принаймні один раз я виправлені всі помилки sx я створив в дорозі). Я просто не отримати будь-який вихід з директиви. Я пішов і додав кілька статичний текст перед директиви ng шоу і я * чи * отримати, що. Це змусило мене замислитися, що можливо Директива не було дозволено створити новий vars як "doShowExpandedErrorDetails" явно чи неявно мають "ng-init" там.
Я повернувся в HTML, щоб побачити, якщо б я був тип і цього разу WebStorm допоміг мені вибратися. Я був проходженні в retrieveLastConfigurationError функцію, як це:
<Генеральний cdl помилка обробника retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</Генеральний cdl помилка обробника>
Але це дійсно необхідно бути це:
<Генеральний cdl помилка обробника отримати останній--помилка конфігурації = "CDLController.retrieveLastConfigurationError()">
</Генеральний cdl помилка обробника>
WebStorm був досить розумний, щоб знати, що це повинно було бути через дефіс. Якщо це не передбачено натяком, Я б напевно буде як і раніше усунення несправностей це 
. Весело рази!
Хитрість полягає в наступному: не тільки це директива вставити ім'я елемента через дефіс, так, є будь-які атрибути, додавати в неї. Одного разу я додав переносів, все це працює прекрасно. Дана підручник довелося використовувати короткі одного імена, так що я не роблять зв'язок.
Сподіваюся, це допоможе хтось.
</кінець>
Йди за мною на Twitter в http://www.twitter.com/pagalvin
.