title: Angularjs: How to pass function into compile
body: <p>I have the following directive:</p>
  
  <pre><code>app.directive('pagedownAdmin', ['$compile', '$timeout', function ($compile, $timeout) {
      var nextId = 0;
      var converter = Markdown.getSanitizingConverter();
      converter.hooks.chain("preBlockGamut", function (text, rbg) {
          return text.replace(/^ {0,3}""" *\n((?:.*?\n)+?) {0,3}""" *$/gm, function (whole, inner) {
              return "&lt;blockquote&gt;" + rbg(inner) + "&lt;/blockquote&gt;\n";
          });
      });
  
      return {
          restrict: "E",
          scope: {
              content: "=",
              modal: '=modal'
          },
          template: '&lt;div class="pagedown-bootstrap-editor"&gt;&lt;/div&gt;',
          link: function (scope, iElement, attrs) {
  
              var editorUniqueId;
  
              if (attrs.id == null) {
                  editorUniqueId = nextId++;
              } else {
                  editorUniqueId = attrs.id;
              }
  
              scope.hideDiv = function () {
                  document.getElementById("wmd-button-bar-" + editorUniqueId).style.display = 'none';
              };
  
              scope.showDiv = function () {
                  document.getElementById("wmd-button-bar-" + editorUniqueId).style.display = 'block';
              };
  
              scope;
  
              var newElement = $compile(
                  '&lt;div&gt;' +
                      '&lt;div class="wmd-panel"&gt;' +
                          '&lt;div data-ng-hide="modal.wmdPreview == true" id="wmd-button-bar-' + editorUniqueId + '" style="display:none;"&gt;&lt;/div&gt;' +
                              '&lt;textarea on-focus="showDiv()" on-blur="hideDiv()" data-ng-hide="modal.wmdPreview == true" class="wmd-input" id="wmd-input-' + editorUniqueId + '" ng-model="content" &gt;' +
                              '&lt;/textarea&gt;' +
                          '&lt;/div&gt;' +
                      '&lt;div data-ng-show="modal.wmdPreview == true" id="wmd-preview-' + editorUniqueId + '" class="pagedownPreview wmd-panel wmd-preview"&gt;test div&lt;/div&gt;' +
                  '&lt;/div&gt;')(scope)
              ;
  
              iElement.append(newElement);
  
              var help = angular.isFunction(scope.help) ? scope.help : function () {
                  // redirect to the guide by default
                  $window.open("http://daringfireball.net/projects/markdown/syntax", "_blank");
              };
  
              var editor = new Markdown.Editor(converter, "-" + editorUniqueId, {
                  handler: help
              });
  
              var editorElement = angular.element(document.getElementById("wmd-input-" + editorUniqueId));
  
              editor.hooks.chain("onPreviewRefresh", function () {
                  // wire up changes caused by user interaction with the pagedown controls
                  // and do within $apply
                  $timeout(function () {
                      scope.content = editorElement.val();
                  });
              });
  
              editor.run();
          }
      }
  }]);
  </code></pre>
  
  <p>Inside I have the showDiv and hideDiv function that would show and hide the page editor's menu when I click in and out of the textarea.</p>
  
  <p>I am passing the functions to an event inside the compile:</p>
  
  <pre><code>//First try
  &lt;textarea onfocus="showDiv()" onblur="hideDiv()"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>When I click inside and outside the textarea I get the errors: </p>
  
  <pre><code>Uncaught ReferenceError: on is not defined
  Uncaught ReferenceError: off is not defined
  
  //Second try
  &lt;textarea on-focus="showDiv()" on-blur="hideDiv()"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>When I click in and out of textarea nothing is happening. No errors but not calling the function either.</p>
  
  <p>Can anyone point me to the right direction? Thanks</p>