Вызвать функцию при щелчке на элементе transcluded внутри директивы AngularJS

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

EDIT

Как было отмечено, в 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