テキストボックスに角型ディレクティブを追加する（スペースバーの入力）

Question

私は角度jを使用していますが、私の目標はテキストボックスにhtmlテーブルを表示し（スペースバーの入力）、そのテキストボックスにテーブルの要素を追加することですhelpsは、ここに私のhtmlテキストボックスは

ある

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

されるディレクティブを書いたが、私はここで私は

より明確にするために詳細にそれが表示されます私は右path..Ohkでそれを行っているかどうかを確認していないしていますdivに私のHTMLをバインドする私の指示は、ここに私の指示コードです

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); 
         }; 
        } 
       } 
      }); 
     } 

    } 
}]); 

、今ここで私の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> 

今、私の質問は、私のテーブルは私のdiv要素だけでなく、私の入力テキストボックスにバインドされ、ということです。だから、これを行う適切な方法はありますか？

私の質問がまだ不明な場合は親切にコメントしてください。 は、任意のヘルプ

いただきありがとうございますここhttps://plnkr.co/edit/lAUyvYKp1weg69CsC2lg?p=preview を私plunkerをチェックして、README

Answer 1

あなたが入力してdiv要素の両方で保存ディレクティブを使用しているすべてのファーストをお読みください。あなたは、最初のステップとして、それらを分離することができます：

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); 
        } 

      }); 
     } 
    }; 
}); 

次にあなたがそのディレクティブにごshowSearch変数を設定し、あなたの入力にそれを使用するように関数を渡すことができます。

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

今setShowSearchは、あなたの中に生きていることcontrollerにはdirectiveが含まれていないので、独自のscopeがあります。

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

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

一度あなたが今テーブルを示す責任があるクリーンなディレクティブを持って行って、残りはちょうど同じような方法でそのディレクティブにまでその配列を渡しています。

これが役に立ちます。