AngularJS -添加ng-view时不工作

AngularJS - Not working when adding ng-view

本文关键字：工作 ng-view 添加 AngularJS      更新时间：2023-09-26

这是我的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链接再次成为可点击的!我完全不知道怎么了!

你的代码有很多地方不对。

实际上，不是你的链接不起作用，而是你引入了一个无限循环导致浏览器崩溃。这是因为当路由是'/'时，你把视图指向'index.html'。

当你开始加载index.html，然后在它的ng-view中加载index.html，然后在它的view中加载index.html，然后再加载index.html。车轮也是如此…

你的ng-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>
相关文章：