带有 routeProvider 的 href 加载新页面而不是绑定视图

Question

我受困于 routeProvider。我的链接一直打开一个新页面，而不是在视图中加载模板。

我的代码如下

raceApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'raceApp/createChallenge_view.php',
            controller: 'createChallenge'
        })
        .when('/createchallenge', {
            templateUrl: 'raceApp/createChallenge_view.php',
            controller: 'createChallenge'
        })
        .when('/findchallenge', {
            templateUrl: 'raceApp/findChallenge_view.php',
            //controller: 'findChallenge'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

我的HTML长得像

<base href="/runkinlocal/wp-content/themes/wordpress-bootstrap-master/" />

<a class="menu-item select-runner0" href="#/createChallenge">
<a class="menu-item select-runner0" href="#/findchallenge">

加载页面时，会加载初始模板，但是当我单击其中一个链接时，会加载新页面，而不是在视图中加载模板 （页面看起来像 http://test.com:8888/runkinlocal/wp-content/themes/wordpress-bootstrap-master/#/createChallenge）

我正在使用 Wordpress。

期待您的帮助！

Answer 1

工作示例

---

plnkr

建议

---

1。你的 href 不应该有 #/

<a href="createChallenge">Create</a> |
<a href="findChallenge">Find</a>

2。否则不需要redirectTo

.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.html'
    })
    .when('/createChallenge', {
      templateUrl: 'create.php',
      controller: 'CreateChallengeController'
    })
    .when('/findChallenge', {
      templateUrl: 'find.php',
      controller: 'FindChallengeController'
    })
    .otherwise("/");

  // configure html5 to get links working on jsfiddle
  $locationProvider.html5Mode(true);
});

3。最后一个 .when()

后的额外逗号

你有：

    .when('/findchallenge', {
        templateUrl: 'raceApp/findChallenge_view.php',
        //controller: 'findChallenge'
    })

控制器被注释掉了，但还有一个逗号。

4。您可能需要配置 html5

（见plnkr中的script.js）

// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);

5。您可以像这样添加基本 href

<script type="text/javascript">
  angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>

相关资源

---

我建议检查这些：

• $routeProvider docs
• $route example

---

如果可行请告诉我！