Using Angular.js, I'm attempting to create a button that when clicked pushes the member to a new url (no page reload) and have the $routeProvider set some $routeParams for the controller to use when making a JSON call for data.
My $routeProvider is setup like so:
app.config(function ($routeProvider) {
$routeProvider.when('/list/:base/:keyword', { templateUrl: 'list', controller: 'listCtrl' })
});
This loads the listCtrl, using the "list" template. On the listCtrl I make a call for data like so:
app.controller('listCtrl', function ($scope, $routeParams, $location, $http) {
console.log('listCtrl called');
$http.get('urlForData&kw=' + $routeParams.keyword).success(function (data) {
$scope.results = data;
});
});
This works fine if I hit the url manually /#/list/baseName/keyword puts all the right $routeParams into the listCtrl and the JSON call works.
I'd like to get the user to that route on click, in my homeCtrl I have a method to change routes, like so:
app.controller('homeCtrl', function ($scope, $routeParams, $location) {
var model = {
criteria: 'yakiniku',
base: 'yokota-ab-japan'
};
$scope.model = model;
$scope.changeRoute = function () {
$location.path('/list/' + model.base + '/' + model.criteria);
};
});
I don't put a url into the changeRoute() method because I want to direct to a url based on values the member has entered into a couple inputs, so I concatenate the model properties into the .path(url) method on the $location service.
I then put an ng-click="changeRoute()" attribute on an HTML <button/>. However, when I click the button, I can see the url change for a split second, then switch right back to the root url. I don't have a .otherwise() route setup, why does it jump back to the root instantly?
Also, I have no third-party libraries referenced, only angular.
Update
It may be important to note when I setup the $locationProvider to use Html5 mode, it changes the url just fine... but since I host the app on an ASP.NET MVC site, I need it to use the hash, not HTML5 mode.
While the route changes work in HTML5 mode, a page refresh on a url without the hash tag will break because it interferes with ASP.NET MVC routes, and I'm trying to allow deep linking into my angular app.
I had a similar issue and got a solution. I hope this helps someone. I have a function in the controller that changes the path using the location method. It is something like this:
$scope.goHome = function(){
$location.path('/home');
}
When I call the function from an anchor tag with href="#" it fails.
The trick is to remove the href attribute. As far as I understand angular moves you to the new path but then your browser executes the # value in the href attribute and you find yourself back in the same page.
So if you remove the href="#" it works. If you are a fan of hand cursor for links use CSS to get it.
.myLink{
cursor:pointer;
}
Cheers, Doruk
You should check if you've enabled or not HTML5 routing. Here is link to docs: http://docs.angularjs.org/guide/dev_guide.services.$location
Here is working plunker example of your situation: http://plnkr.co/edit/snCoGhFnLqgLSIGrJCe7?p=preview