javascript - 为什么使用 $routeProvider 会提前触发路由？

Question

我已经设置好了

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'
        });

我有一些链接:

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

当我点击 Complex 时，HomeController 由于某种原因被触发。

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

trace 被触发:

[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)

为什么会这样？

Answer 1

在您的 HTML 中，点击不是由 AngularJS 处理的，而是在 AngularJS 检测到哈希更改后拾取的。要解决此问题，您应该使用 ng-href 而不是 href，并省略 #/ 部分。 AngularJS 将重写您的链接以以 #/ 开头。

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