javascript - 访问 AngularJS 指令中的 attrs

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>

所以这里发生的是我有一个 anchor <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 非常感谢你，丹尼尔!

Answer 1

石油是正确的。

要详细说明他的答案，您需要:

1. 我假设您在某处定义了scope.newCalendar。在同一位置定义scope.isNewCalendarOverlayVisible = false。
2. 将 ng-click="isNewCalendarOverlayVisible=true"添加为要打开叠加层的链接或按钮上的属性。
3. 将 ng-show="isNewCalendarOverlayVisible"添加到叠加层。

这样，您的覆盖层就会监视该范围属性，以了解它是否应该可见。单击按钮时，该属性将更改为 true，并且模式将变为可见。