Question

这是我的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
    <script src="app.js"></script>
    <title>TESTS</title>
</head>
<body ng-app="testApp">
<a href="#link">Testing angularjs routing</a>
<div ng-view>{{message}}</div>
<div ng-controller="TestController">{{message}}</div>
</body>
</html>

这是app.js：

var testApp = angular.module('testApp', ['ngRoute'])
    .config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl:'index.html',
                controller: 'TestController'
            }).when('/link', {
                templateUrl:'link.html',
                controller:'LinkController'
            });
    });
testApp.controller('TestController', function ($scope) {
    $scope.message = "INDEX";
});
testApp.controller('LinkController', function ($scope) {
   $scope.message = "LINK";
});

我试图让路由工作，但我的链接根本不是clickabble，尽管它看起来像一个普通的链接。显示＆＃34; INDEX＆＃34;的第二条消息，所以我认为ng-view中存在问题，因为如果我删除了ng-view链接，则会再次点击！我不知道什么是错的！

Answer 1

您的代码存在很多问题。

实际上，并不是说您的链接不起作用，而是通过引入无限循环来破坏浏览器。这是因为当路线为'/'时，您将视图指向'index.html'。

所以当你开始时，加载index.html，然后在它的ng-view中加载index.html，然后在它的视图中加载index.html，然后加载index.html ...然后轮子...

您的ng视图中也有一些内容，这将被您加载的实际视图所取代。

最后你在一个视图和index.html中都使用了你的TestController，这不是非法的，但我怀疑它在任何应用程序中都会有意义......但我可能错了。

总的来说，这有点乱。这是一个工作示例：http://plnkr.co/edit/MrdAKu86S3RoreQhO14H?p=preview

var testApp = angular.module('testApp', ['ngRoute'])
    .config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl:'home.html',
                controller: 'TestController'
            }).when('/link', {
                templateUrl:'link.html',
                controller:'LinkController'
            });
    });
testApp.controller('TestController', function ($scope) {
    $scope.message = "INDEX";
});
testApp.controller('LinkController', function ($scope) {
   $scope.message = "LINK";
});

和

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
    <script src="script.js"></script>
    <title>TESTS</title>
</head>
<body ng-app="testApp">

<a href="#/">Home</a>
<a href="#/link">Testing angularjs routing</a>

<div ng-view></div>
</body>
</html>

AngularJS - 添加ng-view时不起作用

1 个答案: