Angular directive add template on textbox (enter of Spacebar)

Question

I am using angular js,My target is to show a html table on (enter of spacebar) in textbox and add the element of the table in that textbox,for that i have written a directive,bu

Answer 1

First of all you are using the save directive in both input and div. You can separate those as first step:

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

             });
        }
    };
});

Then you can pass a function to set your showSearch variable to that directive and use that on your input:

Now that setShowSearch is living in your controller not your directive so it has its own scope.

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

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

Once done you now have a clean directive which is responsible for showing the table and the rest is just passing that array down to that directive in a similar way.

Hope this helps.