обращающиеся ATTRS в директиве AngularJS

Question

я пытаюсь создать наложение (или модальное окно) в AngularJS и я создал до сих пор HTML/макет CSS и поместить его просто выглядит как этот

<section class="calendar"> 
    <a open-overlay="overlay-new-calendar">Add New Calendar</a> 
</section> 



<section class="overlay overlay-new-calendar"> 
    <span class="bg"></span> 
    <form class="wrap"> 
     <header> 
      Add a New My Calendar 
     </header> 

     <div class="main"> 
      <label>Name<input type="text" required ng-model="newCalendar.calendar_name" /></label> 
      <label>Color<input type="text" required ng-model="newCalendar.calendar_color" /></label> 
     </div> 

     <footer> 
      <button type="submit">Add</button> 
      <a close-overlay="overlay-new-calendar">Cancel</a> 
     </footer> 
    </form> 
</section> 

Так что происходит здесь, у меня есть якорь <a open-overlay="overlay-new-calendar">Add New Calendar</a>, где я добавляю директиву open-overlay, которую я хочу сделать родовым и как attr этой директивы, чтобы дать точный оверлей для открытия. Теперь я судимый этого

fixEvents.directive('openOverlay', function() { 
    return function(scope, elem, attr) { 
     elem.bind('click', function() { 
      alert(attr.open-overlay); 
      $('.overlay-new-calendar').show(); 
     }); 
    } 
}); 

Но я не могу получить атр вернуть overlay-new-calendar. Также как я могу сделать шоу, скрыть без jquery, если кто-нибудь знает: D Большое спасибо, Даниэль!

Answer 1

peterorum правильный.

Чтобы уточнить его ответ, вы должны:

1. Я предполагаю, что вы scope.newCalendar где-то определена. Определить scope.isNewCalendarOverlayVisible = false в том же месте.
2. Добавьте ng-click = "isNewCalendarOverlayVisible = true" в качестве атрибута вашей ссылки или кнопки, которую вы хотите открыть наложение.
3. Добавить ng-show = "isNewCalendarOverlayVisible" на ваш оверлей.

Таким образом, ваш оверлей наблюдает за свойством scope, чтобы узнать, должно ли оно быть видимым или нет. Когда нажимается кнопка, это свойство изменяется на true, а модальное становится видимым.

Answer 2

Отображение или скрытие без jQuery выполняется с использованием атрибута, например. "Нг-шоу = MyValue". Таким образом, ваша директива изменит значение модели, например. scope.myValue = true;

Доступ к вашему атрибуту должен быть attr.openOverlay, так как имена атрибутов нормализуются в директиве.

Answer 3

attr нормализует атрибуты вашего элемента. Атрибут open-overlay обрабатывается так же, как data-open-overlay и т. Д. И доступен через attr.openOverlay.

Существует немного больше информации здесь: http://docs.angularjs.org/api/ng.$compile.directive.Attributes

Для отображения и скрытия вы можете использовать peterorum «s ответ ng-show.