silvanasono
silvanasono

Reputation: 394

Angularjs $location.url or path do not update the view in ng-view

I am trying to use $location.url or path to update a view in ng-view, but unsuccessfully. The controller is:

eventsApp.controller('MenuController',
    function($scope, $location) {

        $scope.createEvent = function(){
            $location.url('/newEvent');            
        };

    }
);

The function is simply called in a ngClick event located within the controller:

<li><a href="#" ng-click="createEvent()">Create Event</a></li>

And the routing is:

angular.module('eventsApp', ['ngResource', 'ngRoute'])
    .config(function($routeProvider) {
        $routeProvider.when('/newEvent',
            {
                templateUrl:'templates/NewEvent.html',
                controller: 'EditEventController'
            });

    });

Of course, if i use the href of the anchor tag, it works fine; but if I want to do something more complex in the called function, I can't.

I looked in the Network section of the browser tools and I could see that the template has been fetched. But the neither the url in the address bar is updated, or the view is updated (it actually becomes blank). I am using Apache as a web server, if this thing could be useful in understanding the cause of this issue.

Upvotes: 0

Views: 84

Answers (1)

boardlemur
boardlemur

Reputation: 2881

I suspect it is reloading the page due to the href="#". If you need to stick with an anchor tag even though you're not using href, try removing the # like so:

<li><a href="" ng-click="createEvent()">Create Event</a></li>

However, there could be some fallback if you need to support IE users. If that is the case, you could switch out the anchor tag for a button.

<li>
    <button type="button" ng-click="createEvent()">Create Event</button>
</li>

Upvotes: 1

Related Questions