2017-11-10 2 views
1

Hallo im diese Anweisung in Winkel js Verwendung nach einem keypressRichtlinie mit `this` doesnt geben aktuelle Element Winkel js

angular.module('botApp').directive('myEnter', function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) { 
      if(event.which === 13) { 
       scope.$apply(function(){ 
        scope.$eval(attrs.myEnter); 
       }); 

       event.preventDefault(); 
      } 
     }); 
    }; 
}); 

eingeben zu verfolgen, aber wenn ich diese versuchen, auf einem Eingangselement (wich innerhalb eines ng- ist wiederholen)

<input id="inp-test_text" class="default-input inp-loading" type="text" 
     name="test_text" ng-model="app.test_text" 
     my-enter="inputEnter(this)"> 

und in js ich habe:

$scope.inputEnter = function(currentInput) { 
     console.log(currentInput); 
    } 

i bekommen dies als eine Antwort:

console-log of currentInput

So bekomme ich das Everthing außer der aktuellen Eingangsinformation. Wie bekomme ich das Element, auf das ich gedrückt habe? ($ Fall ist $ Element nicht als Parameter arbeitet)

Antwort

1

In Angular expressions, die Kennung this greift auf das Kontextobjekt, das im Fall von $eval ist das scope Objekt.

die lokale element bereitzustellen, fügen Sie sie als lokale:

app.directive('myEnter', function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) { 
      if(event.which === 13) { 
       scope.$apply(function(){ 
        ̶s̶c̶o̶p̶e̶.̶$̶e̶v̶a̶l̶(̶a̶t̶t̶r̶s̶.̶m̶y̶E̶n̶t̶e̶r̶)̶;̶ 
        scope.$eval(attrs.myEnter, {$element: element}); 
       }); 

       event.preventDefault(); 
      } 
     }); 
    }; 
}); 

Dann wird es als lokale verfügbar sein:

<input id="inp-test_text" class="default-input inp-loading" type="text" 
     name="test_text" ng-model="app.test_text" 
     ̶m̶y̶-̶e̶n̶t̶e̶r̶=̶"̶i̶n̶p̶u̶t̶E̶n̶t̶e̶r̶(̶t̶h̶i̶s̶)̶"̶ 
     my-enter="inputEnter($element)"> 

Weitere Informationen finden Sie

+0

es funktioniert! vielen Dank!! –

+0

Sorry, ich habe es vergessen! –

+0

Unter der Haube verwendet das ['scope. $ Eval'] (https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$eval) den Dienst' $ parse'. Weitere Informationen finden Sie unter [AngularJS-API-Referenz "$ parse"] (https://docs.angularjs.org/api/ng/service/$parse). – georgeawg

Verwandte Themen