AngularJS: Wie Funktion in der Kompilierung

Question

passiert Ich habe die folgende Anweisung:

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 "<blockquote>" + rbg(inner) + "</blockquote>\n"; 
     }); 
    }); 

    return { 
     restrict: "E", 
     scope: { 
      content: "=", 
      modal: '=modal' 
     }, 
     template: '<div class="pagedown-bootstrap-editor"></div>', 
     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(
       '<div>' + 
        '<div class="wmd-panel">' + 
         '<div data-ng-hide="modal.wmdPreview == true" id="wmd-button-bar-' + editorUniqueId + '" style="display:none;"></div>' + 
          '<textarea on-focus="showDiv()" on-blur="hideDiv()" data-ng-hide="modal.wmdPreview == true" class="wmd-input" id="wmd-input-' + editorUniqueId + '" ng-model="content" >' + 
          '</textarea>' + 
         '</div>' + 
        '<div data-ng-show="modal.wmdPreview == true" id="wmd-preview-' + editorUniqueId + '" class="pagedownPreview wmd-panel wmd-preview">test div</div>' + 
       '</div>')(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(); 
     } 
    } 
}]); 

Innerhalb ich die showDiv und hideDiv Funktion habe, die Seiteneditor-Menü beim Klicken in dem und aus dem Textbereich würde ein- und ausgeblendet .

ich die Funktionen innerhalb der Kompilierung zu einer Veranstaltung am vorbei:

//First try 
<textarea onfocus="showDiv()" onblur="hideDiv()"></textarea> 

Wenn ich innen auf und klicken Sie außerhalb des Textarea bekomme ich die Fehler:

Uncaught ReferenceError: on is not defined 
Uncaught ReferenceError: off is not defined 

//Second try 
<textarea on-focus="showDiv()" on-blur="hideDiv()"></textarea> 

Wenn ich auf in und aus Textarea passiert nichts. Keine Fehler, aber keine Funktion aufgerufen.

Kann mir jemand in die richtige Richtung zeigen? Danke

Answer 1

Danke Jungs für den Versuch zu helfen. Ich habe festgestellt, was mit meinem Code nicht stimmt. Ich habe einen sehr dummen/noob Fehler gemacht. Ich verwendete on-focus anstelle von ng-focus und on-blur anstelle von ng-blur.

Answer 2

Anstatt den gleichen Bereich zu verwenden, instanziieren Sie einen neuen Bereich (scope.$new()) und weisen Sie die Funktionen diesem neuen Bereich zu. Andernfalls überschreiben Sie die Funktionsreferenzen, die der Bereichsdeklaration für das Bereichsobjekt zugewiesen wurden.

var newScope = scope.$new(); 
newScope.hideDiv = function() {...}; 
newScope.showDiv = function() {...}; 
... 
var newElement = $compile(...)(newScope); 

und die Funktion Verweise auf den ursprünglichen Umfang (der Richtlinie) gegeben verwenden Sie die in den neuen Bereichen Funktionen (z function() { scope.hideDiv(); }) aufrufen können.

Arbeiten plnkr:

http://plnkr.co/edit/nGux3DOsrcPBcmz43p2A?p=preview

https://docs.angularjs.org/api/ng/service/$compile https://code.angularjs.org/1.3.16/docs/api/ng/type/$rootScope.Scope#$new