0

tldr;

I need to fire a custom directive/jQuery plugin on ng-click and pass a parameter to it then reload that page so the parameter's value takes place. So on reload instead of there being 3 results in my Google Map, there should be 50 results showing.


Disclaimer

I've done a ton of reading on firing directive on ng-click as well as passing parameters to directive (particularly this question and this question and this question) but I am fairly new to AngularJS so I'm still a bit naive to all the greatness of Angular and how to utilize it properly...

Background

I created a jQuery plugin for a Google Maps API app I'm creating. The app is using AngularJS also. The plugin creates a map and shows 3 locations to the user plugin code here. Under the map I have the list of 3 locations in a table. I also have a button that says more results which should return 50 more locations.

Question

What is the best way to...

  1. Pass a new parameter to my plugin/directive? Currently on page load I load the directive and fire the plugin by <div tfinder-map="{queryLimit: 3}">. Ideally I'd like to be passing 50 when I click the more results button.

  2. Along with passing the param to my directive/plugin on click of more results, I would like it to essentially fire the directive and reload the page so the 50 results show up, instead of just 3.

After reading other questions, I think passing a param to my directive would go something like this (although I'm sure the syntax is wrong):

ng-click="tfinder-map(queryLimit: 50)"

And to be able to persist that value as the page reloads, the only way I could think to do that would be via a query string argument in the URL.

I also did a little reading about $route.reload() which sounds interesting, I just don't know the best way to implement this to do a reload with params.

The code

My current directive looks like this:

directive('tfinderMap', function() { return { restrict: 'A', link: function(scope, elm, attrs) { $(elm).tfindermap(scope.$eval(attrs.tfinderMap)); } }; 

})

And in jQuery it'd be

$('#foo').tfindermap({queryLimit: 3}) 

The actual jQuery plugin can be viewed here on Github

Also, here's the UI if it helps visualize it

the UI

clicking the more results button should make 50 results appear as opposed to 3

2
  • Can't you somehow add a function to the plugin that "reloads" the necessary stuff (e.g. locations) and then just trigger that function, instead of having to persist a value and reload the page ? Commented Apr 21, 2014 at 15:01
  • @ExpertSystem that's a good way of looking at it. I'll look into that. Thanks! Commented Apr 21, 2014 at 17:04

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.