handling focus und blur ereignis in winkel 1.5 komponente

Vor kurzem arbeitete ich in einem eckigen js-projekt. Ich stoße zufällig auf eine Situation, in der ich die Textbox Fokus und Unschärfe behandeln muss. Mein Szenario ist, dass ich $ Zeichen anfügen muss, wenn der Fokus aus dem Textfeld ist, und $ anfügen, wenn das Textfeld fokussiert ist.handling focus und blur ereignis in winkel 1.5 komponente

Ich versuchte Komponente zu schaffen für die

 angular.module('myApp').component('dollarText', { 
      templateUrl: '<input type="text">', 
      controller: function($scope, iElm, iAttrs){ 
       iElm.bind('change', function(){ 
        iElm.val('$'+iElm.val()); 
       }); 
      } 
     });

aber ich kann nicht Ereigniszugriff Fokus. Ich weiß, dass ich es nicht richtig gemacht habe. Wie kann ich Fokus und Unschärfe in der Winkelkomponente auslösen? Ist Winkelkomponente beste Wahl für meine Aufgabe.

Quelle

2016-05-28 Anuj K.C.

Verwenden Sie 'Währung' Filter? –

Wie kann ich Währungsfilter in Textbox Fokus und Unschärfe setzen. Möchte $ anhängen, wenn der Fokus aus ist. Wenn Textfeld konzentriert ist, möchten Sie $ entfernen. Dieses $ sollte nicht zur Validierung kommen. Validierung sollte numerisch sein. Ich bin neu zu eckigen das ist warum –

Wenn Sie ein bestimmtes div oder andere, zum Beispiel zu handhaben wollen, in einem ng-repeat oder in einer langen Liste von Elemente, müssen Sie function(this) und auf JavaScript Seite verwenden, müssen Sie function(context) verwenden, um mit diesem Elemente zu interagieren.

Here's a working Plunker von dem, was Sie vermutlich suchen.

HTML:

<html ng-app="myApp"> 

    <body ng-controller="myController"> 
    <!--When on-blur, call blur(this), when on-focus, call focus(this)--> 
    <input type="text" name="myApplicationRocks" 
      ng-focus="focus(this)" ng-blur="blur(this)"/> 
     <!-- Content changes on blur and on focus--> 
     <h1>{{whatToWrite}}</h1> 
    </body> 
</html>

JS:

var myApp = angular.module('myApp', []); 

myApp.controller('myController', function($scope){ 

    $scope.whatToWrite = "Well, try something"; 

    $scope.focus = function(context){ 
    console.log("On Focus"); 
    context.whatToWrite = "Focus On!"; 
    }; 

    $scope.blur = function(context){ 
    console.log("On Blur"); 
    context.whatToWrite = "Blur On!"; 
    }; 
});

Natürlich wird es funktioniert auch ohne this und context aber in bestimmten Situationen ist es sehr nützlich.

Ich hoffe, ich war hilfreich.

Quelle

2016-05-28 19:08:45 AndreaM16

Kann ich das als eine Komponente verwenden. Das ist die Logik innerhalb des Controllers der Komponente –

Wenn Sie meinen, auf ein genaues Element zuzugreifen, das in anderen Elementen liegt, ja, verwenden Sie einfach "this" und "context". Versuchen Sie es und lassen Sie es mich wissen, wenn Sie Hilfe brauchen. – AndreaM16

hat diesen Code ausprobiert, aber der Fokus löst nicht aus app.component ('dollarText', { Vorlage: ' ‘, Controller: function ($ scope) {// this.user = {name: 'Welt'}; this.focus = function (Kontext) { \t console.log ('eingegeben'); } this.blur = function (Kontext) { \t console.log ('links');} } }) –

handling focus und blur ereignis in winkel 1.5 komponente

Antwort

Verwandte Themen