Angular Direktive hinzufügen Vorlage auf Textbox (Eingabe der Leertaste)

Question

Ich benutze eckige js, Mein Ziel ist es, eine HTML-Tabelle auf (Eingabe der Leertaste) im Textfeld anzuzeigen und das Element der Tabelle in diesem Textfeld für das i geschrieben haben eine Richtlinie, aber ich bin nicht sicher, ob ich es in der rechten path..Ohk getan habe ich es im Detail zeigen, wird klarer sein

Hier ist mein hTML Textbox

<input type="text" helps ng-model="firstText" code="1"> 
<div class="col-xs-4 pull-right" helps donotapply=true></div> //Do i need this?? 

Hier helps ist meine Direktive, die meine html an die div bindet, hier ist meine Direktive

app.directive('helps', ['$parse', '$http','$filter', function ($parse, $http,$filter) { 
    return { 
     restrict: 'AE', 
     scope: true, 
     templateUrl: 'Table.html', 
     link: function (scope, element, attr) { 
      console.log(element); 
      element.bind("keypress", function (event) { 
        if (event.which === 114 || event.which === 32) { 

         scope.enterMe = function() { // this is to add data to Table 

           scope.newArray = [ 
             {'code' :1,'name' : 'name1','age' : 24}, 
             {'code' : 2,'name' : 'name2','age' : 26}, 
             {'code' : 3,'name' : 'name3','age' : 25} 
            ] 
          }; 

         scope.setElement = function (element) { // Here set element function is to add my table name to textbox 
          var modelValue = tempattr.ngModel + '_value'; 
          var model = $parse(tempattr.ngModel); 
          model.assign(scope, element.name); 
          modelValue = tempattr.ngModel + '_value'; 
          modelValue = $parse(modelValue); 
          modelValue.assign(scope, element.code); 
         }; 
        } 
       } 
      }); 
     } 

    } 
}]); 

Und mein Hier table.html

<div class="col-xs-4 pull-right" ng-show="hideMyMtHelpDiv"> 
    <input type="text" ng-model="searchText" placeholder="search"> 
    <input type="button" ng-model="gad" value="GO" ng-click="enterMe();"> 
    <table ng-show="getTableValue" class="table table-bordered table-responsive table-hover add-lineheight table_scroll"> 
     <thead> 
      <tr> 
       <td> 
        Code 
       </td> 
       <td> 
        Name 
       </td> 
       <td> 
        Age 
       </td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="test in newArray" ng-dblclick="setElement(test);"> 
       <td> 
        {{test.code}} 
       </td> 
       <td> 
        {{test.name}} 
       </td> 
       <td> 
        {{test.age}} 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Nun meine Frage ist, dass mein Tisch mit meinem div sowie mein Eingang Textbox binded ist; Also, gibt es einen richtigen Weg, dies zu tun?

Wenn meine Frage noch unklar ist, bitte Kommentar. Vielen Dank für jede Hilfe

mein Plunker Check https://plnkr.co/edit/lAUyvYKp1weg69CsC2lg?p=preview und lesen README

Answer 1

Zu allererst Sie die Richtlinie speichern unter Verwendung sowohl in Ein- und div. Sie können diejenigen, die als erster Schritt trennen:

mod.directive('onKeydown', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      setShowSearch: '&' 
     }, 
     link: function(scope, elem, attrs) { 

      elem.on('keydown', function(event){ 

        if (event.which === 114 || event.which === 32) { 
         setShowSearch()(true); 
        } 

      }); 
     } 
    }; 
}); 

Dann Sie eine Funktion übergeben können Ihre showSearch Variable dieser Richtlinie festlegen und verwenden, die auf Ihre Eingabe:

<input type="text" ng-model="firstText" hpcode="1" on-keydown="" set-show-search="setShowSearch"/> 

Nun, da setShowSearch in lebenden Ihr controller nicht Ihre directive so hat es eine eigene scope.

myApp.controller('MyController', ['$scope', function($scope) { 
    $scope.setShowSearch = function(show) { 
     //do whatever you want here 
    }; 

    $scope.msg = 'This Must Work!'; 
}]); 

Nun können Sie jetzt eine saubere Richtlinie haben, die zur Darstellung der Tabelle und der Rest verantwortlich ist vorbei, genau das Array bis zu dieser Richtlinie in ähnlicher Weise.

Hoffe, das hilft.