Директивы в Angularjs для начинающих. Часть 2

[thekip]

Я бы обратил еще особое внимание на то, что в изолированном скоупе мы задаем переменные camelCase'ом, но в DOM они должны быть написаны через дефис, т.е:

scope:{
      localVar1:"@", /*localVar1:"@localVar1" */
      localVar2:"=",  /*localVar2:"@localVar2" */
      localVar3:"&"  /*localVar3:"@localVar3" */
}

<div ng-app="helloHabrahabr">
        <span habra-habr="hello" local-var1="Hello Habr!"  local-var2="Foo" ></span>    
</div>

А так работать НЕ будет:

<div ng-app="helloHabrahabr">
        <span habra-habr="hello" localVar1="Hello Habr!"  localVar2="Foo" ></span>    
</div>

[Demetros]

Полагаю, стоит упомянуть и о том, что в templateUrl может быть id уже существующего шаблона на странице, заданного в виде

<script id="SomeTemplate" type="text/ng-template">
...
</script>

т.е.

templateUrl: 'SomeTemplate'

[thekip]

Или даже ссылка на отдельный файл:

templateUrl: 'partials/SomeTemplate.html'

[durovchpoknet]

Добавил в статью ссылку на комментарий

[vittore]

Есть досадное ограничение на темплейты директив — только один рутовый тег на темплейт. То есть вот такой темплейт работать будет

     <div ng-app="helloHabrahabr">
        <span habra-habr="hello" localVar1="Hello Habr!"  localVar2="Foo" ></span>    
     </div>

А вот такой нет

     <div ng-app="helloHabrahabr">
        <span habra-habr="hello" localVar1="Hello Habr!"  localVar2="Foo" ></span>    
     </div>
     <div ng-app="helloHabrahabr">
        <span habra-habr="hello" localVar1="Hello Habr!"  localVar2="Foo" ></span>    
     </div>

Это ограничение можно обойти если использовать компиляцию шаблона в link вручную.

components.directive('myDir', function ($compile) {
    return {
        link: function ( scope,element, attrs) {
           var tmpl = '<div ng-app="helloHabrahabr">'+
        '<span habra-habr="hello" localVar1="Hello Habr!"  localVar2="Foo" ></span>'+    
     '</div>'+
     '<div ng-app="helloHabrahabr">'+
        '<span habra-habr="hello" localVar1="Hello Habr!"  localVar2="Foo" ></span>'+    
     '</div>'
     
           var newElement = angular.element(tmpl)
           $compile(newElement)(scope)
           element.replaceWith(newElement)   
       } 

    })

[thekip]

А зачем внутри директивы вообще создавать приложение (ng-app)?

[vittore]

Плохой пример выбрал, скопировал разметку из предыдущего комментария. Приложения там не нужно, а вот любые другие диррективы будут работать, так как шаблон скомпилирован.

Смысл в том что можно получить несколько корневых тэгов.

[termi]

Какой страшный этот ваш Angularjs.

HTML-шаблоны внутри js-кода?

template:"<input ng-model='hello'>{{hello}}"

Функции внутри разметки?

<span habra-habr some-attr="hello= a+b"></span> 

Мне лично не нравится.

[4vanger]

На деле всё не так страшно — темплейты в коде писать никто не заставляет — куда удобнее держать их в отедельных файлах и собирать в один JS файл на этапе сборки проекта. А для разработки даже можно ничего не собирать — ангуляр сам подтянет темплейты из templateUrl через AJAX
Касательно логики в темплейте — она используется для изменения состояния контроллера или вывода. Так специально ограничили, чтобы народ не пихал бизнес-логику в код.
До сегодняшнего релиза там даже conditional expressions не было — сегодня добавили тернарный if — реально удобно.
Логика в темплейтах должна использоваться примерно так:

<form ng-hide="isLoading" ng-submit="isLoading = true">
  ...
  <input type="submit">
</form>
<div ng-show="isLoading">Sending data on server...</div>

Плашка isLoading будет показана, когда форма будет отправлена на сервер. Когда данные будут получены — контроллер сделает scope.isLoading = false и плашка спрячется, а форма вернётся.

[termi]

Касательно логики в темплейте...

Спасибо за объяснения. Действительно, с такими ограничениями всё кажется не так страшно.

Но мне всё равно не понятно

… куда удобнее держать их в отедельных файлах и собирать в один JS файл на этапе сборки проекта. А для разработки даже можно ничего не собирать...

Т.е. при разработки в js-коде будет написано `templateUrl: 'some.html'` а при сборке нужно это както заменить? Вручную? Или Ангулар самостоятельно пройдётся по js-файлам и заменит вхождение этой строки? Сомнительно.

[4vanger]

Я уже давал ссылку в первой части — npmjs.org/package/grunt-angular-templates
При сборке он пройдётся по всем темплейтам и сгенерирует из них строки, которыми заполнит $templateCache
В исходниках ничего менять не надо будет.

[Demetros]

Интересно было бы узнать, что по вашему не страшно и нравится лично вам.

[termi]

habrahabr.ru/post/179359/#comment_6248559
Тут примерно вид шаблона, модели и контроллера. Это то, к чему я стремлюсь. На текущий же момент, можно написать такой код:
jsfiddle.net/termi/4cF97/ — Этот пример максимально упрощен, из него вырезаны все вызовы фреймворка и оставлено только DOM API. Как вы можете видеть, никаких data-* или других кастомных атрибутов не используется, только стандартные.
Это только демонстрация возможностей, готового фреймворка пока нету.

Не в коем случае не говорю, что Angularjs плохая библиотека, просто, по моему, простые вещи в ней сделаны слишком сложно, а сложные ещё сложнее. Да и производительность страдает — я тестировал на большом количестве компонентов.

[termi]

Где, где у меня в коде классы или идентификаторы? Простите, но Вы код вообще смотрели? В демо jsfiddle.net/termi/4cF97/ всё обращение с DOM идёт через специальное (нативное для браузера) абстрактное API. Код максимально абстрагирован от DOM и может быть использован и с другим бэкендом, например с WebGL.

Вот ещё один пример: h123.ru/-/tests/KeyboardEvent/ — тут с шаблонизацией, но тоже проходной вариант, я просто игрался с DOM API.

В комментарии же, ссылку на который я дал, следующий уровень абстрагируемости от DOM.

[thekip]

Просто вы начали знакомство с Angular «не с той стороны»

Начните знакомство отсюда angularjs.org/ (с главы The Basics, знакомство займет не больше 10 минут).
И возможно вы вдохновитесь декларативным подходом, так же как и я в свое время.

[termi]

Посмотрите пожалуйста мои примеры приведённые в комментариях выше. В обоих примерах используется декларативный стиль. Селекторы, классы, идентификаторы, кастомные аттрибуты и т.д. не используются. И всё это сделано с использованием встроенных в браузер API, а при желании я могу сменить бэкенд на WebGL

[DarkGenius]

Интересно, что бы вы сказали о React)

[DarkGenius]

http://jsfiddle.net/dXLLz/

В этом примере имена директивы в html и в js не согласованы между собой (habra-habr-template и habraHabr). Пример не работает. Опечатка?

[DarkGenius]

Ссылка к примеру для префикса "=" ведет на пример для префикса "@".