Question

我写了一个模态指令，因为我想在页面上有几个模态。我使用本教程来实现这一目标：http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/

首先，这是我的指令代码，它与上一个教程中的代码非常相似：

//here, app is an AngularJS module
app.directive('modal', function() {
    return {
        restrict: 'E',
        scope: {
            show: '='
        },
        replace: true,
        transclude: true,
        link: function(scope) {
            scope.hide = function() {
                scope.show = false;
                document.body.classList.remove('wwf-noScroll');
            };
        },
        template: '<div class="Modal" ng-show="show"><div class="Modal-overlay" ng-click="hide()"></div><button class="Modal-close" ng-click="hide()"></button><div class="Modal-content" ng-transclude></div></div>'
    };
});

然后是我如何使用它：

<modal show="showInformationsModal">
    <h2 class="Modal-title">Informations</h2>
    <button type="button">Close this</button>
</modal>

我想要实现的是能够关闭模态（即调用指令范围中定义的hide函数）。但是我不能把按钮放在我的指令模板中，因为有时候我想在模态中按一个按钮来关闭它，但有时不会，并且这个按钮里面的文字将永远不会相同。

我尝试了一些类似的事情：

<button type="button" ng-click="hide()">Close this</button>
<button type="button" ng-click="showInformationsModal = false">Close this</button>
<button type="button" ng-click="show = false">Close this</button>

没有任何效果。我想我错过了什么！有人可以帮帮我吗？

谢谢，

西里尔

Answer 1

修改

正如在this comment中指出的那样，transclude功能可以更加通用，将var contentElement = element[0].querySelector('.Modal-content');替换为var contentElement = element[0].querySelector('[ng-transclude]');

<强> ORIGINAL

朋友发给我这个链接：http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

我所缺少的正是这个链接所指出的：被转换的HTML的范围不是指令的孤立范围。

我使用了link函数的第五个参数：

transclude(scope, function(clone, scope) { var contentElement = element[0].querySelector('.Modal-content'); contentElement.innerHTML = ''; for (var i = 0; i < clone.length; ++i) { contentElement.appendChild(clone[i]); } });

这是更新的codepen。我不知道这是解决我问题的最美妙的方法，但它解决了它！ http://codepen.io/JesmoDrazik/pen/NqZLYR?editors=001

单击AngularJS指令内的transcluded元素调用函数

1 个答案: