Question

我是AngularJS的新手。我有一个简单的简单代码段，使用 ng-controller 和 $ routeProvider 。但它不适合我。我该如何修复此代码？这是我的angularJSDemo.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Demo App </title>
</head>
<body ng-controller="SimpleController">
<div>
<div ng-view=""></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<script>
var myModule = angular.module("myApp", []);
myModule.controller('SimpleController', function ($scope) {
$scope.friends =
              [{ name: 'John', phone: '555-1212', age: 10 },
               { name: 'Mary', phone: '555-9876', age: 19 },
               { name: 'Mike', phone: '555-4321', age: 21 },
               { name: 'Adam', phone: '555-5678', age: 35 },
               { name: 'Julie', phone: '555-8765', age: 29 }];
$scope.addFriend = function () {
                  $scope.friends.push(
                  {
                    name: $scope.newFriend.name,
                    phone: $scope.newFriend.phone,
                    age: $scope.newFriend.age
                 });
                };
    });
    myModule.config(function ($routeProvider) {
        $routeProvider
        .when('/',
        {
            controller: 'SimpleController',
            templateUrl: 'ngViews/view1.html'
        })
        .when('/view2',
        {
            controller: 'SimpleController',
            templateUrl: 'ngViews/view2.html'
        })
        .otherwise({ redirectTo: '/view1' });
    });
</script>
</body>
</html>

View1.html

<div class="container">
<h2>This is view 1</h2>
<br />
Tags:
<br />
<input type="text" ng-model="tags" />{{tags}}
<ul>
    <li ng-repeat="FriendName in friends1|filter:tags | orderBy:'-age'">{{FriendName.name}}--  {{FriendName.age}}</li>
</ul><br />
Name:
<br />
<input type="text" ng-model="newFriend.name" />{{myFriend.name}}<br />
Phone:
<br />
<input type="text" ng-model="newFriend.phone" />{{myFriend.phone}}
<br />
Age:<br />
<input type="text" ng-model="newFriend.age" />{{myFriend.age}}<br />
<button ng-click="addFriend()">Friend Add</button>
<a href="#/view2">next</a>

view2.html

<div class="container">
<h2>This is view 2</h2>
<br />
Tags:
<br />
<input type="text" ng-model="newFriend.name" />{{tags}}
<br />`enter code here`
<input type="text" ng-model="newFriend.phone" />{{tags}}
<ul>
    <li ng-repeat="FriendName in friends2|filter:tags | orderBy:'age'">{{FriendName.name}}--{{FriendName.age}}</li>
</ul>

Answer 1

1）您必须导入angular-route.js

下方的angular.js

< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.min.js"></script>

2）在应用程序中注入ngRoute模块

var myModule = angular.module("myApp", ['ngRoute']);

3）然后调用路由配置。

 myModule.config(function ($routeProvider) {
    $routeProvider.....

 });

Answer 2

你在ng-repeat指令的视图中有这些行：

FriendName in friends1|filter:tags | orderBy:'age'
FriendName in friends2|filter:tags | orderBy:'age'

虽然您的控制器的friends1中未定义friends2和$scope。尝试将它们简单地更改为friends

指令ng-controller不起作用

2 个答案: