Вентилация съвет за ъглови директиви (Или, Да се научим да обичат тирета цял нагоре пак)

Имам няколко програми, които правят $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 клас = "бдителен предупреждение-опасност" роля = "предупреждение" ПГ-първоначален = "doShowExpandedErrorDetails = true" ПГ-шоу = "retrieveLastConfigurationError()">' +
"Имаше / и грешка или друга грешка. Това обикновено се случва, защото конфигурационния файл с данни не може да бъде " +
"намерени или в конфигурационния файл съдържа неточна информация (като съотнасяне на библиотека с документи " +
"това не съществува).' +
' <BR />' +
' <DIV ПГ-шоу = "doShowExpandedErrorDetails">' +
' <a href = "#" ПГ-клик = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
"Щракнете тук, за да скриете подробности." +
' </а>: ' +
' <BR />' +
' <предварително>{{retrieveLastConfigurationError() | JSON}}</предварително>' +
' <BR />' +
' </DIV>' +
' <DIV ПГ-шоу = "!doShowExpandedErrorDetails">' +
' <a href = "#" ПГ-клик = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
"Щракнете тук, за да разгънете подробни данни за грешката." +
' </а>' +
' </DIV>' +
'</DIV>'
};
});

По принцип, Аз съм създаване на нов елемент, наречен "generalCdlErrorHandler".  Тя се нуждае от достъп до функция, наречена retrieveLastConfigurationError и която се обработва в обхвата на обекта.  Вероятно би могъл само да използва родителски обхват, но това се чувства мързеливи.  Ако някой мисли, трябва да са направили това, Бих искал да чуе за това в коментарите.

Това е цял глоба, но аз не получават нищо.  Няма грешки, промъкват в конзолата (най-малко веднъж оправих всички sx грешки съм създал по пътя).  Аз просто не се получи всяка продукция от директивата.  Аз отидох и добавя някои статичен текст преди директивата на ПГ-шоу и аз * е * се, че. Това ме накара да мисля че може би директивата не бе позволено да имплицитно създаде нови vars като "doShowExpandedErrorDetails" или "ПГ-първоначален" там. 

Върнах се в HTML, за да видите, ако имах тип и този път WebStorm ми помогна.  Аз са били преминаване във функцията на retrieveLastConfigurationError като това:

<генерал cdl грешка манипулатор retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</генерал-cdl-грешка-манипулатор>

Но това наистина е необходимо да бъде това:

<генерал cdl грешка манипулатор извличане-последно-конфигурация-грешка = "CDLController.retrieveLastConfigurationError()">
</генерал-cdl-грешка-манипулатор>

WebStorm е достатъчно умен, за да се знае, че тя трябваше да бъде с тире.  Ако то не е при условие че намек, Аз ще вероятно бъда все още отстраняване на това Усмивка.  Забавни Таймс!

Номерът е това: не само е с тире на Директива елемент името, така са всички атрибути, можете да добавите към него.  След като добавих тирета, всичко работи чудесно.  Дан настойнически случайност да използват къси единични имена, така че аз не направи връзката.

Надежда този помагам някой.

</край>

undefinedАбонирайте се за моя блог.

Следвайте ме на Twitter в http://www.twitter.com/pagalvin

Оставете отговор

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани *