Search code examples
angularjsionic-frameworkangularjs-ng-clickalgolia

ng-click doesn't work with external JavaScript


I am creating an ionic project and I am trying to integrate with Algolia autocomplete.js. I managed to make the search system work, however I added a ng-click on my search results and this function is not working as presented in this codepen that I did as example below:

http://codepen.io/marcos_arata/pen/VKVOky

Inside my algolia's result template:

<a ng-click="add_name({{{ name }}})">

Function that should be run when clicked:

$scope.add_name = function(name) {
    alert('User added!');
    console.log(name);
}

I tried to inject the results inside the scope but didn't work as well:

autocomplete('#search_name', { hint: false, debug: true, openOnFocus: true },[{
    source: index.ttAdapter({ hitsPerPage: 15 }),
    templates: {
        header: '',
        suggestion: function(hit) {

            $scope.hit = hit;

            return template.render(hit);

        }
    }
}]);

http://codepen.io/marcos_arata/pen/VKVOky

---- SOLVED ----

Instead of creating a ng-click function inside your templates, you can handle the event click of your search inside your "autocomplete:selected" function and use the dataset and suggestion results.

.on('autocomplete:selected', function(event, suggestion, dataset) {

  $scope.name = suggestion.name;
  console.log($scope.name);
  ## create any functions with the suggestion and dataset results inside

});

Solution

  • EDITING THE ANSWER:

    Here is the codepen:

    Apparently the suggestion keep the name clicked, so you dont need an extra function:

    .on('autocomplete:selected', function(event, suggestion, dataset) {
    
      $scope.name = suggestion.name;
      console.log($scope.name);
    });