href 和 routeProvider 加载一个新页面而不是绑定视图 [英] href with routeProvider loads a new page instead of binding the view

问题描述

我一直在使用 routeProvider.我的链接不断打开一个新页面，而不是在视图中加载模板.

我的代码如下

raceApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {$routeProvider.什么时候('/'， {templateUrl: 'raceApp/createChallenge_view.php',控制器:'createChallenge'}).when('/createchallenge', {templateUrl: 'raceApp/createChallenge_view.php',控制器:'createChallenge'}).when('/findchallenge', {templateUrl: 'raceApp/findChallenge_view.php',//控制器:'findChallenge'}).除此以外({重定向到:'/'});}]);

我的 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.

我期待您的帮助！

解决方案

工作示例

<小时><块引用>

plnkr

建议

<小时>

1.你的 href 不应该有 #/

<a href="createChallenge">Create</a>|<a href="findChallenge">查找</a>

2.否则不需要 redirectTo

.config(function($routeProvider, $locationProvider) {$routeProvider.什么时候('/'， {模板网址:'home.html'}).when('/createChallenge', {templateUrl: 'create.php',控制器:'创建挑战控制器'}).when('/findChallenge', {templateUrl: 'find.php',控制器:'FindChallengeController'}).除此以外("/");//配置 html5 以获取在 jsfiddle 上工作的链接$locationProvider.html5Mode(true);});

3.最后一个 .when() 之后的额外逗号

你有:

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

控制器已被注释掉，但仍有一个逗号.

4.您可能需要配置 html5

(参见 plnkr 中的 script.js)

//配置 html5 以获取在 jsfiddle 上工作的链接$locationProvider.html5Mode(true);

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

相关资源

<小时>

我建议检查这些:

• $routeProvider 文档
• $route 示例

<小时>

让我知道这是否有效！

I'm stuck with routeProvider. my links keep opening a new page instead of loading the template in the view.

My code is the following

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

My HTML looks like

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

When the page loads, the initial template is loaded, but then when I click on one of the links, a new page loads instead of loading the template in the view ( the page looks like http://test.com:8888/runkinlocal/wp-content/themes/wordpress-bootstrap-master/#/createChallenge)

I am working with Wordpress.

I'm looking forward to your help!

解决方案

Working Example

---

plnkr

Suggestions

---

1. Your hrefs should not have #/

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

2. Otherwise doesn't need 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. Extra comma after last .when()

You have:

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

The controller is commented out but there is still a comma.

4. You might need to configure html5

(see script.js in the plnkr)

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

5. You can add the base href like so

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

Relevant Resources

---

I suggest checking these out:

• $routeProvider docs
• $route example

---

Let me know if that works!

这篇关于href 和 routeProvider 加载一个新页面而不是绑定视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！