2013-10-14 94 views
0

我試圖創建AngularJS覆蓋(或模態窗口),我創建至今的HTML/CSS佈局,並把它簡單,它看起來像這樣在AngularJS指令訪問ATTRS

<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>其中我添加了一個指令打開覆蓋,我想使通用和attr指令,以給出確切的覆蓋打開。現在我試了

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

但我不能得到attr返回overlay-new-calendar。另外我怎麼能做這個節目,如果有人知道,不用jquery就可以隱藏:D非常感謝Daniel,Daniel!

回答

2

peterorum是正確的。

爲了詳細說明他的回答,您需要:

  1. 我假設你已經scope.newCalendar某處定義。在同一個地方定義scope.isNewCalendarOverlayVisible = false。
  2. 將ng-click =「isNewCalendarOverlayVisible = true」作爲您想要打開疊加層的鏈接或按鈕上的屬性。
  3. 將ng-show =「isNewCalendarOverlayVisible」添加到疊加層。

這樣,您的覆蓋圖正在觀察該範圍屬性,以瞭解它是否應該可見或不可見。單擊按鈕時,該屬性將更改爲true,並且該模式將變爲可見。

+1

當您準備好將窗體重新隱藏時,請務必設置「isNewCalendarOverlayVisible = false」。 – KayakDave

+0

非常感謝你,這只是把我帶到了一個新的水平:) –

2

顯示或隱藏沒有jQuery是使用一個屬性例如「NG秀= myvalue的」。因此,您的指示會改變模型的價值,例如scope.myValue = true;

訪問您的屬性應該是attr.openOverlay,因爲屬性名稱在指令中被標準化。

+0

非常感謝你,夥伴,我很欣賞! –