New to Angular and attempting to use it to real-time filter the results of a checkbox and query-string search, and to display those results on a map. I have the map load pins off the results of a function which is initially called, but is also theoretically triggered by a $watch function (in Coffee Script:
angular.module("Common").directive 'bucketMap', (... QueryString, PlaceFilterer, $compile, $timeout) ->
return {
...
link: (s, element) ->
...
s.filterPlaces = (rawPlaces) ->
s.primaryPlaces = PlaceFilterer.returnFiltered(rawPlaces)
s.drawMap = (s, elem) ->
s.$watch 'QueryString.changesInQuery', ->
console.log "Map Filter: #{QueryString.changesInQuery}"
# IDEALLY I WOULD THEN RE-EXECUTE THE FILTER SCRIPT
# E.G. with s.filterPlaces(s.rawPlaces)
...
I'm testing with the console.log how many times s.$watch 'QueryString.changesInQuery', -> gets hit (also have a console.log in the QueryString module which reports every time QueryString.changesInQuery is updated. But my s.$watch function is only hit on initial load and never again runs, despite the underlying variable (QueryString.changesInQuery) changing demonstrably -- e.g. the contents of my console log as I edit checkboxes on the page looks like this:
query_string.js?body=1:62 QueryString: 0
bucket_map.js?body=1:45 Map Filter: 0
query_string.js?body=1:62 QueryString: 1
query_string.js?body=1:62 QueryString: 2
query_string.js?body=1:62 QueryString: 3
query_string.js?body=1:62 QueryString: 4
So clearly the variable is changing, but is not being registered by my $watch function.
I read the very helpful SO post (How do I use $scope.$watch and $scope.$apply in AngularJS?) and thought this was a perfect instance of using $watch to track a variable and then rerun my filtering process -- but am guessing I've not applied it correctly in this context.
