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>，我在其中添加了一个指令 open-overlay，我希望将其设为通用，并作为该指令的 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！

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规范化元素上的属性。该属性open-overlay被视为与data-open-overlayetc 相同，并且可以通过attr.openOverlay.

这里有更多信息：http: //docs.angularjs.org/api/ng.$compile.directive.Attributes

对于显示和隐藏，您可以使用peterorum的答案ng-show。

于 2013-10-14T22:55:04.890 回答