Question

我的代码存在一些问题，我创建了一个模块demoApp示例，如下：

<html ng-app="demoApp">
    <head>
        <title>Customer - Order Example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div ng-view=""></div>
        <script type="text/javascript" src="libs/angular.min.js"></script>
        <script type="text/javascript" src="libs/angular-route.js"></script>
        <script type="text/javascript">
            var demoApp = angular.module('demoApp', ['ngRoute']);

            demoApp.config(function($routeProvider){
                $routeProvider
                        .when('/order',
                                {
                                    controller: 'UserController',
                                    templateUrl: 'partials/order.html'
                                })
                        .when('/user', 
                                {
                                    controller: 'UserController',
                                    templateUrl: 'partials/user.html'
                                })
                       .otherwise({redirectTo: '/user'});

            });

            demoApp.factory('simpleFactory', function() {
                var orders = [{id: 1, title: 'Order1', quantity: 10, user_id: 1},
                                  {id: 2, title: 'Order2', quantity: 10, user_id: 1},
                                  {id: 3, title: 'Order3', quantity: 10, user_id: 1},
                                  {id: 4, title: 'Order1', quantity: 10, user_id: 2},
                                  {id: 5, title: 'Order1', quantity: 10, user_id: 2},
                                  {id: 6, title: 'Order1', quantity: 10, user_id: 2}];
                var factory = {};
                factory.getOrders = function() {
                    return orders;
                };

                return factory;

            });

            demoApp.controller('UserController', function($scope, simpleFactory){
                $scope.users = [{id: 1, name: 'User1', email: 'user1@yopmail.com', age: 27},
                                {id: 2, name: 'User2', email: 'user2@yopmail.com', age: 27},
                                {id: 3, name: 'User3', email: 'user3@yopmail.com', age: 27},
                                {id: 4, name: 'User4', email: 'user4@yopmail.com', age: 27},
                                {id: 5, name: 'User5', email: 'user5@yopmail.com', age: 27},
                                {id: 6, name: 'User6', email: 'user6@yopmail.com', age: 27},
                                {id: 7, name: 'User7', email: 'user7@yopmail.com', age: 27},
                                {id: 8, name: 'User8', email: 'user8@yopmail.com', age: 27},
                                {id: 9, name: 'User9', email: 'user9@yopmail.com', age: 27}];

                $scope.orders = simpleFactory.getOrders();


                $scope.addUser = function()
                {
                    $scope.users.push({id: $scope.users.length, name: $scope.newName, email: $scope.newEmail, age: $scope.newAge});
                };

                $scope.ordersOfUser = [];

                $scope.redirectOrder = function(userId)
                {
                    angular.forEach($scope.orders, function(value, key){

                        if(value.user_id ===  userId)
                        {
                            $scope.ordersOfUser.push(value);
                        }

                    });
                    return $scope.ordersOfUser;
                };

            });
        </script>
    </body>
</html>

但是当我在orderOfUser模板文件中调用它时，我不知道为什么order.html为空..

order.html文件：

<div ng-controller="UserController">
    <table>
        <thead>
            <tr>
                <td>Title</td>
                <td>Quanity</td>
            </tr>
        </thead>

        <tbody ng-repeat="order in ordersOfUser">
            <tr>
                <td>{{order.title}}</td>
                <td>{{order.quantity}}</td>
            </tr>
        </tbody>
    </table>
    <a ng-href="#/user" /> Back to user </a>
</div>

user.html文件：

<div ng-controller="UserController">
    <form ng-submit="addUser()">
        <label for="name"> Name </label>
        <input ng-model="newName" />
        <label for="name"> Email </label>
        <input ng-model="newEmail" />
        <label for="name"> Age </label>
        <input ng-model="newAge" />
        <input type="submit" value="Add" />
    </form>
    <ul ng-repeat="user in users">
        <li>
            <p>{{user.name}}</p>
            <p>{{user.email}}</p>
            <p>{{user.age}}</p>
            <a ng-href="#/order" ng-click="redirectOrder(user.id)">Order</a>

        </li>
    </ul>

</div>

提前致谢

Answer 1

它是空白的，因为你永远不会填充它：

$scope.ordersOfUser = [];

触及此字段的唯一代码是$scope.redirectOrder函数，它永远不会被调用。

发表评论后编辑

您对两条路线使用相同的控制器。这意味着当您更改路由时，将重新实例化控制器。因此，当您从/user导航到/order时，会再次调用此行：

$scope.ordersOfUser = [];

在您的redirectOrder功能之后称为，因此它会清除所有内容。

您应该使用服务来存储此类信息，然后将其注入两个单独的控制器，一个用于订单页面，另一个用于用户页面。

angularjs中的route和$ scope变量

1 个答案: