i have a design issue while working with angular. Need suggestions on it.
I have a page which loads based on route. Now on the page i have some filters which controls the data like price range and date. these filters will set query param in url. so state + query params will decide the data. And on every change of filters these query params should change and accordingly pages should be loaded. each filter has its own directive.
Now the problem is when first time i am routing to a state. and these filters are generated by directives for the first time :
how i will bind them to url query param. and then these query param should be passed to routeProvider and then to controllers which will fetch the data.
when page is loaded how i will bind these filters so that on change again query params are changed and new data is fetched and page is populated.
how to bind these query params in two way direction.
My code snippet :-
route :-
decorpot.config(['$routeProvider', '$provide', function($routeProvider, $provide){
$provide.decorator('ngViewDirective', function($delegate) {
var directive = $delegate[0];
directive.replace = true;
return $delegate;
});
$routeProvider.when('/', {
templateUrl: 'resources/partials/home.html',
controller: 'DecorpotCtrl'
}).when('/imageListSpace/:param', {
templateUrl: 'resources/partials/imageList.html',
controller: 'ImageListController'
})
.otherwise({
redirectTo: '/'
});
}]);
Controllers -
decorpotCtrls.controller('ImageListController', [ '$scope', '$routeParams', 'interiors', function($scope, $routeParams, interiors ) {
interiors.getImages($routeParams.param).success(function(data) {
$scope.imageList = data;
});
} ]);
filter directive -
decortDirectives.directive("priceRange", function() {
$("#priceRange").ionRangeSlider({
type : "double",
min : 100000,
max : 300000,
prefix : "Rs.",
prettify_enabled: true,
});
});