2

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 :

  1. 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.

  2. 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.

  3. 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,
    });
 });
1
  • Not sure If I full understood the issue, you are getting url params, then if you change a filter you just fire your $http request to get updated data but you want as well to update the query params in the url (not reloading the page), this scenario can be ok for you? You can add a $watch to your filter properties then change your params (the change of params without reloading seems to be a bit tricky, found this stackoverflow.com/questions/17981281/… ). Commented Aug 2, 2015 at 12:09

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.