Неисправностей подсказка для угловых директив (Или, Научиться любить дефисы все снова)

У меня есть пару apps что делать $http.get() звонки и я хотел иметь возможность показать красиво отформатированное сообщение об ошибке с описанием уродливые ошибки скрытые, но доступными.  В основном, Это:

image

И то если пользователь нажимает на ошибки, они видят Подробнее:

image

Простые вещи.  Поскольку точное же потенциальные ошибки могут появляться в административного экрана, а также экрана конечного пользователя, она четко призвала к пользовательской директивы угловой.  Я  нашел это Лучший сериал статей (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) от Великого Дэн Уолину.  Следуя его советам, Я очень быстро создал <Привет, мир> Директива и переехал на мои более сложные ошибки отображения ракеля. Я побежал в немного проблемы с этой более сложной директивы.  К счастью, вроде случайно, Я сказал WebStorm (редактор, я использую эти дни) что файл JS файл угловой и он помог мне выяснить этот вопрос.  Это код для директивы, сам:

angular.Module(«CDLApp»).Директива(«generalCdlErrorHandler», функция() {

возвращение {
ограничить: «Е»,
заменить: Истина,

Сфера: {
retrieveLastConfigurationError: "&"
},

шаблон:
'<Div класс = "предупреждение предупреждение опасность" роль = «предупреждение" нг init = "doShowExpandedErrorDetails = true" нг шоу = «retrieveLastConfigurationError()">' +
«Там была ошибка ввода-вывода или другая ошибка. Обычно это происходит потому, что файл данных конфигурации не может быть ' +
' найдено или файл конфигурации содержит неточную информацию (Например, ссылки на библиотеки документов ' +
' что не существует).' +
' <br />' +
' <Div нг шоу = «doShowExpandedErrorDetails»>' +
' <a href = "#" нг клик = «doShowExpandedErrorDetails = ! doShowExpandedErrorDetails»>' +
«Нажмите здесь, чтобы скрыть подробности.» +
' </в>: ' +
' <br />' +
' <Pre>{{retrieveLastConfigurationError() | JSON}}</Pre>' +
' <br />' +
' </Div>' +
' <Div нг шоу =»!doShowExpandedErrorDetails»>' +
' <a href = "#" нг клик = «doShowExpandedErrorDetails = ! doShowExpandedErrorDetails»>' +
«Нажмите здесь, чтобы развернуть подробные сведения об ошибке.» +
' </в>' +
' </Div>' +
'</Div>'
};
});

В основном, Я создаю новый элемент под названием «generalCdlErrorHandler».  Доступ к функции с именем retrieveLastConfigurationError и что обрабатывается в объект области.  Я наверное мог бы просто использовать область родительского, но что чувствует ленивый.  Если кто-то думает, что я должен сделать, Хотел бы услышать об этом в комментариях.

Это было все хорошо, но я не получаю ничего.  Ошибки не выскочил в консоли (по крайней мере один раз я исправлены все ошибки sx, которую я создал по пути).  Я просто не получить какой-либо вывод из директивы.  Я пошел и добавил статический текст перед нг шоу директивы и я * ли * получить,. Это заставило меня думать, что возможно директива не разрешили создать новые переменные как «doShowExpandedErrorDetails» явно или неявно имеют «нг init» там. 

Я пошел обратно в код HTML, чтобы увидеть, если я должен был тип и на этот раз WebStorm помог мне выбраться.  Я передачи в функцию retrieveLastConfigurationError, как это:

<Генеральная cdl обработчик ошибок retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</Генеральная cdl обработчик ошибок>

Но это действительно необходимо это:

<Генеральная cdl обработчик ошибок получить последний конфигурации ошибка = «CDLController.retrieveLastConfigurationError()">
</Генеральная cdl обработчик ошибок>

WebStorm был достаточно умен, чтобы знать, что он должен быть дефис.  Если это не предусмотрено что намек, Я бы наверное по-прежнему устранение неполадок это Улыбка.  Весело раз!

Это трюк: не только имя элемента директивы дефис, так же любые атрибуты, вы добавить к нему.  Как только я добавил дефисы, Все это работало большой.  Учебник Дэна произошло использовать короткие имена одного, так что я не сделал соединение.

Понадейтесь что это помогает кто-то.

</конец>

undefinedПодписаться на мой блог.

Следуй за мной по щебетать на http://www.twitter.com/pagalvin

Оставь ответ

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *