title: Call a function on click on a transcluded element inside an AngularJS directive
body: <p>I wrote a modal directive because I want to have a couple of modal on a page. I used this tutorial to achieve this : <a href="http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/" rel="nofollow">http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/</a></p>
  
  <p>To begin, here is my directive code, which is pretty the same as the one in the previous tutorial :</p>
  
  <pre><code>//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: '&lt;div class="Modal" ng-show="show"&gt;&lt;div class="Modal-overlay" ng-click="hide()"&gt;&lt;/div&gt;&lt;button class="Modal-close" ng-click="hide()"&gt;&lt;/button&gt;&lt;div class="Modal-content" ng-transclude&gt;&lt;/div&gt;&lt;/div&gt;'
      };
  });
  </code></pre>
  
  <p>Then here is how I use it :</p>
  
  <pre><code>&lt;modal show="showInformationsModal"&gt;
      &lt;h2 class="Modal-title"&gt;Informations&lt;/h2&gt;
      &lt;button type="button"&gt;Close this&lt;/button&gt;
  &lt;/modal&gt;
  </code></pre>
  
  <p>What I want to achieve is being able to close the modal (ie. call the <code>hide</code> function defined in the directive's scope). But I can't put the button in the template of my directive because sometimes I want a button in the modal to close it, but sometimes not, and the text inside this button will never be the same.</p>
  
  <p>I tried some things like :</p>
  
  <ul>
  <li><code>&lt;button type="button" ng-click="hide()"&gt;Close this&lt;/button&gt;</code></li>
  <li><code>&lt;button type="button" ng-click="showInformationsModal = false"&gt;Close this&lt;/button&gt;</code></li>
  <li><code>&lt;button type="button" ng-click="show = false"&gt;Close this&lt;/button&gt;</code></li>
  </ul>
  
  <p>Nothing worked. I think I'm missing something ! Can somebody help me ?</p>
  
  <p>Thank you,</p>
  
  <p>Cyrille</p>