Why does a route trigger early with $routeProvider?

Question

I have set up

function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/pages/home.html',
            controller: 'HomeController'
        })
        .when('/terms', {
            templateUrl: 'views/pages/terms/terms.html',
            controller: 'TermsController'
        })
        .when('/patients/:patientId/schedule/daily', {
            templateUrl: 'views/pages/schedule/schedule.html',
            controller: 'ScheduleHomeController'
        })
        .when('/patients/:patientId/schedule/complex', {
            templateUrl: 'views/pages/schedule/schedule.html',
            controller: 'ScheduleHomeController'
        })
        .when('/error', {
            templateUrl: 'views/pages/error.html',
            controller: 'HomeController'
        })
        .otherwise({
            redirectTo: '/error'
        });

I have some links:

            <li class="anchor" data-ng-class="{'current-pg':model.schedulePage==='daily-schedule'}">
                <a href="#/patients/{{ model.currentPatient.patientId }}/schedule/daily">Daily</a>
            </li>
            <li data-ng-class="{'current-pg':model.schedulePage==='complex-schedule'}">
                <a href="#/patients/{{ model.currentPatient.patientId }}/schedule/complex">Complex</a>
            </li>

When I click Complex, the HomeController gets triggered for some reason.

window.map.controller('HomeController', ['$scope', '$location', 'cache',
    function($scope, $location, cache) {
console.trace();

That trace gets triggered:

[Log] console.trace()
    (anonymous function) (app.src.js, line 6110)
    invoke (vendor.src.js, line 29750)
    instantiate (vendor.src.js, line 29758)
    (anonymous function) (vendor.src.js, line 34048)
    link (vendor.src.js, line 52831)
    invokeLinkFn (vendor.src.js, line 33805)
    nodeLinkFn (vendor.src.js, line 33315)
    compositeLinkFn (vendor.src.js, line 32664)
    publicLinkFn (vendor.src.js, line 32543)
    boundTranscludeFn (vendor.src.js, line 32682)
    controllersBoundTransclude (vendor.src.js, line 33342)
    update (vendor.src.js, line 52789)
    $broadcast (vendor.src.js, line 40332)
    (anonymous function) (vendor.src.js, line 52472)
    processQueue (vendor.src.js, line 38795)
    (anonymous function) (vendor.src.js, line 38811)
    $eval (vendor.src.js, line 40013)
    $digest (vendor.src.js, line 39829)
    $apply (vendor.src.js, line 40118)
    done (vendor.src.js, line 35245)
    completeRequest (vendor.src.js, line 35435)
    requestLoaded (vendor.src.js, line 35376)

Any reason why that would be?

Answer 1

In your HTML, the click is not handled by AngularJS, but picked up later when AngularJS detects a hash change. To fix this, you should use ng-href instead of href, and omit the #/ part. AngularJS will rewrite your links to start with #/.

   <li class="anchor" data-ng-class="{'current-pg':model.schedulePage==='daily-schedule'}">
        <a ng-href="patients/{{ model.currentPatient.patientId }}/schedule/daily">Daily</a>
    </li>
    <li data-ng-class="{'current-pg':model.schedulePage==='complex-schedule'}">
        <a ng-href="patients/{{ model.currentPatient.patientId }}/schedule/complex">Complex</a>
    </li>