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();
        });
    }
});

但我无法让attr返回overlay-new-calendar。如果有人知道的话，我怎么能做这个节目，没有jquery隐藏：D非常感谢，Daniel！

Answer 1

使用例如属性完成显示或隐藏没有jQuery “NG秀= myvalue的”。所以你的指令会改变模型的值，例如scope.myValue = true;

访问属性应该是attr.openOverlay，因为属性名称在指令中被标准化。

Answer 2

peterorum是正确的。

要详细说明他的回答，你需要：

我假设你已经在某处定义了scope.newCalendar。在同一个地方定义scope.isNewCalendarOverlayVisible = false。
添加ng-click =“isNewCalendarOverlayVisible = true”作为您要打开叠加层的链接或按钮的属性。
将ng-show =“isNewCalendarOverlayVisible”添加到您的叠加层。

这样你的叠加层就会看着范围属性，知道它是否应该可见。单击该按钮时，该属性将更改为true，并且模式将变为可见。

Answer 3

attr规范化元素的属性。属性open-overlay的处理方式与data-open-overlay等相同，可通过attr.openOverlay访问。

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

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

访问AngularJS指令中的attrs

3 个答案: