Имам няколко програми, които правят $http.get() повиквания и аз исках да бъде в състояние да покаже добре форматирано съобщение за грешка с Грозната грешка подробности скрити, но достъпни.  По принцип, Това:

И след това ако потребителят кликне върху грешката, Те виждат повече информация:

Обикновено неща.  Тъй като точно същата потенциална грешка може да се появи в административните екрана, както и екрана на крайния потребител, Тя ясно призовава за Директива на потребителски ъглови.  АЗ  Намерих това добър сериал статии (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 е достатъчно умен, за да се знае, че тя трябваше да бъде с тире.  Ако то не е при условие че намек, Аз ще вероятно бъда все още отстраняване на това .  Забавни Таймс!

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

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

</край>

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

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

Този блог постове описва как можете да имате множество Angular.js базирани SharePoint уеб части (препраща чрез уеб компонент за редактор на съдържание) на същата страница. Обаждам се на уеб компонент за редактор на съдържание (CEWP) това препраща към JavaScript, с помощта на Angular.js рамка "ъглова Web част."

На Ъгловата в bootstrap процес е супер лесно и просто за всеки пример, можете намерите на internets е нещо подобно:

<HTML ПГ-ап = "Моетоприлож">

<бла /><бла /><бла />

</HTML>

Това развали, Въпреки това, Ако искате да разрешите няколко CEWP представляващи множество ъглови уеб компоненти на същата страница. Ъгловата ще автоматично само срещу първата директива ПГ-ап го bootstrap находки – поне от ъгловите версия 1.3.6. Решението е доста проста-ръчно bootstrap своя код вместо. По-горе промени на нещо подобно:

<тяло>
<dIV ИД =”bootstrapHere” ПГ-контролер =”myController като theController”>
<бла /><бла /><бла />
</DIV>
</тяло>

<скрипт src =”//AJAX.googleapis.com/AJAX/libs/angularjs/1.3.6/angular.js”></скрипт>

<скрипт>
angular.Bootstrap(angular.Element(document.getElementById(“bootstrapHere”)),["Моетоприлож"]);
</скрипт>

По принцип, вместо да използвате ПГ-ап на елемент да направите вашия bootstrapping, шамар ИД към този елемент. След това, Използвайте bootstrap() метод на ъгловите себе си да контролира bootstrapping процес по време на изпълнение. Аз бях тестван това с три различни ъглови уеб компоненти на същата страница и то работилница чар.

</край>

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

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