У мене є кілька застосунків, що зробити $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

Цей блог посад описує, як ви можете мати кілька Angular.js на основі веб-частини SharePoint (посилання за допомогою веб-частини редактора вмісту) на одній сторінці. Я дзвоню контент-редактор веб-частини (CEWP) який посилається JavaScript, побудований з використанням Angular.js рамках послугами "Кутовий веб-частини."

Bootstrap процес кутової, це просто супер, і майже кожен приклад, ви знайдете на Інтернет йде щось на зразок цього:

<HTML ng-app = 'myApp'>

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

</HTML>

Це виходить з ладу, Однак, Щоб увімкнути кілька CEWP, що представляють кілька кутових веб-частин на одній сторінці. Кутовий буде тільки автоматично завантаженні проти першої директиви ng-app знахідки – щонайменше починаючи з кутовою версії 1.3.6. Рішення досить проста – вручну завантаженні вашого коду замість. Вище тепер змін щось на зразок цього:

<тіло>
<dIV id =”bootstrapHere” NG контролер =”myController як theController”>
<бла /><бла /><бла />
</DIV>
</тіло>

<скрипт src =”//Ajax.googleapis.com/AJAX/libs/angularjs/1.3.6/angular.js”></сценарій>

<сценарій>
angular.Bootstrap(angular.Element(document.getElementById(“bootstrapHere”)),['myApp']);
</сценарій>

В основному, Замість того щоб використовувати ng-app на елемент робити ваші початкова завантаження, ви вдарите ID на цей елемент. Потім, використовувати початкового завантаження() метод на кутових сам контролювати, що початкова завантаження процесу під час роботи. Я це перевіряв це три різні кутові веб-частин на тій же сторінці, і вона працює Шарм.

</кінець>

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

Йди за мною на Twitter в http://www.twitter.com/pagalvin