Я написал модальную директиву, потому что хочу иметь пару модальных страниц. Я использовал этот учебник для достижения этого: 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
функцию 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>
Ничего не получилось. Кажется, я что-то упускаю! Может кто-нибудь мне помочь?
Спасибо,
Сирил
РЕДАКТИРОВАТЬ
Как было указано в этом комментарии, функция transclude
может быть более общей, заменив var contentElement = element[0].querySelector('.Modal-content');
с var contentElement = element[0].querySelector('[ng-transclude]');
ОРИГИНАЛ
Друг прислал мне эту ссылку: http://angular-tips.com/blog/2014/03/transclusion-and-scopes/
То, что мне не хватало, - это именно то, что указывает эта ссылка: transcluded HTML scope не является директивной изолированной областью.
Я использовал пятый параметр функции 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]);
}
});
Вот код обновлен. Я не знаю, если это самый красивый способ решить мою проблему, но он решает это! http://codepen.io/JesmoDrazik/pen/NqZLYR?editors=001