文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJS - angularJS路由的问题

问AngularJS - angularJS路由的问题
EN

Stack Overflow用户

提问于 2016-12-22 21:37:33

回答 1查看 65关注 0票数 2

我对angularJs有一个问题，基本上当我按下链接时，它不会改变页面，有人能帮我吗？

//   app.js

var app = angular.module("geral", ["ngRoute"]);
app.config(function ($routeProvider) 
{
    $routeProvider.when('/', 
    {
        controller: "HomeController",
        templateUrl: "App/Views/home.html"
    })
    .when('/secondPage', 
    {
        controller: "SecondController",
        templateUrl: "App/Views/second.html"
    })
    .otherwise({ redirectTo: '/' })
});


// HomeController.js

app.controller("HomeController", ["$scope", function($scope) 
{
    $scope.persons = 
    [
        {
            name: "...",
            age: 18
        },
        {
            name: "...",
            age: 82
        }
    ];
}]);


// SecondController.js

app.controller("SecondController", ["$scope", function($scope) 
{
    $scope.temp = setInterval(function() 
    {
        if (parseInt($("#circle").css("top")) + parseInt($("#circle").css("height")) < window.innerHeight)
            $("#circle").css("top", (parseInt($("#circle").css("top")) + 1).toString() + "px");
        else clearInterval($scope.temp);
    }, 10);
}]);

<!--Index.html-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="Content/bootstrap.min.css" type="text/css" rel="stylesheet" />
        <link href="Content/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
        <link href="Content/font-awesome.min.css" type="type/css" rel="stylesheet" />
        <link href="Content/geral.css" type="text/css" rel="stylesheet" />
        <script src="Scripts/Shared/angular.min.js"></script>
        <script src="Scripts/Shared/angular-route.min.js"></script>
    </head>
    <body ng-app="geral">
        <div ng-view></div>
        <script src="Scripts/Shared/jquery-3.1.1.min.js"></script>
        <script src="Scripts/Shared/bootstrap.min.js"></script>
        <script src="Scripts/Shared/knockout.js"></script>
        <script src="Scripts/Shared/geral.js"></script>
        <script src="Scripts/app.js"></script>
        <script src="Scripts/Controllers/HomeController.js"></script>
        <script src="Scripts/Controllers/SecondController.js"></script>
    </body>
</html>


<!--home.html-->

<div>
    <div class="container" ng-repeat="person in persons">
        <span class="info">{{ person.name }}</span><br />
        <span class="info">{{ person.age | number }}</span><hr />
    </div>
    <a href="#/secondPage">Start cicle</a>
</div>

<!--second.html-->

<div class="main">
    <div id="circle"></div>
</div>

我不认为问题在控制器脚本中，因为我已经倒置了控制器的角色，并且与'/‘相关的角色工作得很好。顺便说一下，重点是制作一个单一的页面应用程序。

javascript

html

angularjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-22 23:13:24

据我所知，问题在于锚标记中的href。

试着改变这个，

<a href="#/secondPage">Start cicle</a>

至

<a href="#secondPage">Start cicle</a>

请看下面的示例扑通

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41292012

复制

相似问题

问AngularJS - angularJS路由的问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS - angularJS路由的问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS - angularJS路由的问题
EN