0

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>、オープン オーバーレイ ディレクティブを追加するアンカーがあり、それをジェネリックにし、そのディレクティブに 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 どうもありがとう、ダニエル!

4

3 に答える 3

2

ペテロラムが正しいです。

彼の答えを詳しく説明するには、次のことを行う必要があります。

  1. scope.newCalendar がどこかに定義されていると仮定します。同じ場所に scope.isNewCalendarOverlayVisible = false を定義します。
  2. オーバーレイを開くリンクまたはボタンの属性として ng-click="isNewCalendarOverlayVisible=true" を追加します。
  3. オーバーレイに ng-show="isNewCalendarOverlayVisible" を追加します。

このようにして、オーバーレイはそのスコープ プロパティを監視して、表示する必要があるかどうかを認識します。ボタンをクリックすると、そのプロパティが true に変わり、モーダルが表示されます。

于 2013-10-14T22:59:00.297 に答える
2

jQuery を使用せずに表示または非表示を行うには、"ng-show=myValue" などの属性を使用します。したがって、ディレクティブはモデルの値を変更します。たとえば、scope.myValue = true; です。

属性名はディレクティブで正規化されるため、属性へのアクセスは attr.openOverlay である必要があります。

于 2013-10-14T22:54:13.197 に答える
1

attr要素の属性を正規化します。この属性はetc とopen-overlay同じように扱われ、からアクセスできます。data-open-overlayattr.openOverlay

ここにもう少し情報があります: http://docs.angularjs.org/api/ng.$compile.directive.Attributes

表示と非表示には、 peterorumの answer ofを使用できますng-show。

于 2013-10-14T22:55:04.890 に答える