angularjs - $location.search() setter not causing reload in ui-router -
with ngroute, using $location.search() setter cause route reload , can turn off behaviour reloadonsearch: false.
however if swap ngroute code above ui-route code, controller no longer gets reloaded.
how can trigger route reload in ui-router while keeping query parameters in url ngroute?
edit: need keep queries in url, , unchanged after route reload because want user able bookmark it.
/?people=bob&people=james&people=pete...&color=red&color=blue...etc script.js
angular.module('app', ['ui.router', 'ngroute']) // .config(['$stateprovider', '$urlrouterprovider', function($stateprovider, $urlrouterprovider) { // $stateprovider // .state('home', { // url: '/', // templateurl: 'page1.html', // controller: 'mycontroller' // }); // $urlrouterprovider.otherwise('/'); // }]) .config(function($routeprovider, $locationprovider) { $routeprovider .when('/', { templateurl: 'page1.html', controller: 'mycontroller' // reloadonsearch: false }); }) .controller('mycontroller', ['$scope', '$location', function($scope, $location) { console.log('reloaded'); $scope.changequery = function(testid) { $location.search('id', testid); console.log($location.absurl()); }; } ]); index.html
<!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <title>document</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script> <script src="script.js"></script> </head> <body ng-controller="mycontroller"> <h3>ui router</h3> <ui-view></ui-view> <h3>ng router</h3> <ng-view></ng-view> </body> </html> page1.html
<h1>change query example</h1> <input ng-model="testid" /> <button ng-click="changequery(testid)">change!</button>
in controller, instead of directly changing $location, try change $state using $state.go(...)
documented here: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state
angular.module('app', ['ui.router', 'ngroute']).config(['$stateprovider','$urlrouterprovider', function($stateprovider, $urlrouterprovider) { $stateprovider.state('home', { url: '/?key=:id', templateurl: 'page1.html', controller: 'mycontroller' }); $urlrouterprovider.otherwise('/'); }]).controller('mycontroller', ['$scope', '$state', '$location', function($scope, $state, $location) { console.log('reloaded'); $scope.reload = function() { $state.reload(); }; $scope.changequery = function(testid) { $state.go('home', {id: testid}); console.log($location.absurl()); }; } ]); example: plunker
Comments
Post a Comment