这是我的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";
});
我正在尝试使路由工作，但我的链接根本无法点击，尽管它看起来像一个正常的链接。第二条消息显示“INDEX”，所以我认为 ng-view 存在问题，因为如果我删除带有 ng-view 的行，链接将再次可点击!我不知道出了什么问题!
最佳答案
您的代码有很多问题。
实际上，并不是您的链接不起作用，而是您通过引入无限循环导致浏览器崩溃。这是因为当路由为“/”时，您将 View 指向“index.html”。
所以当你开始时，你加载index.html，然后在它的ng-view中加载index.html，然后在它的 View 中加载index.html，然后加载index.html...然后轮子就这样开始了...
您的 ng-view 中还有一些内容，这些内容将被您加载的实际 View 替换。
最后，您在 View 和 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>
关于javascript - AngularJS - 添加 ng-view 时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24630800/