0

在下面的代码中，每当你从列表中的删除链接中删除一个项目时，它只会从列表中删除该项目，但不会删除当前选中的项目。（单击后显示的项目）。但是，如果您单击当前所选项目旁边的删除链接，它将从两个位置删除。

复制我所看到的：

  • 通过在文本框中键入并按几次 Enter 来添加一堆项目。
  • 从列表中选择一项。
  • 当它显示在下面时，单击该项目旁边的删除。
  • 这是正确的行为。
  • 选择您之前创建的另一个项目。
  • 现在单击列表中项目旁边的删除链接。
  • 该项目从列表中删除，但不是当前显示的项目。

当我单击列表中的删除链接时，当我进入代码 $scope.currentUser 时未定义。

为什么会这样？

<html ng-app="myApp">
<head>
    <script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
    <script>
    var app = angular.module('myApp', []);

    app.config(function($routeProvider) {
        $routeProvider.when('/User/:id', {
            controller: UserCtrl,
            template: '<h1>{{currentUser.name}}</h1> <a ng-click="deleteUser(currentUser.id)">delete me</a>'
        });
    });

    app.factory('userSvc', function(){ 
        return new UserService();
    });

    function UserCtrl($scope, $routeParams, $location, userSvc) {
        var currUser = userSvc.getUser($routeParams.id);
        $scope.currentUser = currUser;
        $scope.users = userSvc.getAllUsers();

        $scope.addUser = function () {
            var user = { 
                id: userSvc.nextId(),
                name: $scope.addUserName
            };
            userSvc.addUser(user);
            $scope.addUserName = '';
            $location.url('/User/' + user.id);
        };

        $scope.deleteUser = function(id) {      
            if($scope.currentUser != null && $scope.currentUser.id == id) {
                $scope.currentUser = null;
            }
            userSvc.delete(id);
        };
    };

    function UserService() {
        var users = [{id: 1, name: 'Ben' }];

        this.delete = function(id) {
            for(var i = 0; i < users.length; i++) {
                var user = users[i];
                if(user.id == id) {
                    users.splice(i,1);
                }
            }
        };

        this.addUser = function(user) {
            users.push(user);
        };

        this.getAllUsers = function() {
            return users;
        };

        this.getUser = function(id) {
            for(var i = 0; i < users.length; i++) {
                var user = users[i];
                if(user.id == id) {
                    return user;
                }
            }
        };

        this.nextId = function() {
            var maxId = 0;
            for(var i = 0; i < users.length; i++) {
                var user = users[i];
                maxId = Math.max(maxId, user.id);
            };
            return maxId + 1;
        };
    }
    </script>
</head>
<body>
<div ng-controller="UserCtrl">
    <form ng-submit="addUser()">
        <input ng-model="addUserName" type="text"/>
        <input type="submit" value="Add"/>
    </form>
    <ul>
        <li ng-repeat="user in users"><a href="#/User/{{user.id}}">{{user.name}}</a> <a ng-click="deleteUser(user.id)">delete</a></li>
    </ul>
</div>
<div ng-view></div>
</body>
</html>
4

1 回答 1

0

事实证明，从列表中选择用户实际上还创建了一个全新的范围，该范围与用于绑定列表的范围不同。

多亏了 Gloopy 在上面查看 Batarang 的评论，我才能够看到这种情况发生。如果这对您有帮助，请 +1 他的评论。

根据Scopes 的文档，一些指令实际上会导致创建一个新的范围。我假设单击 $routeProvider 正在处理的链接也会导致创建一个全新的范围树，可能是因为它正在创建该控制器的另一个实例。

于 2012-08-01T00:03:50.740 回答