Question

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

要复制我所看到的内容：

通过在文本框中输入并按几次输入来添加一堆项目。
从列表中选择一个项目。
点击下方显示该项目旁边的删除。
这是正确的行为。
选择您之前创建的其他项目。
现在点击列表中项目旁边的删除链接。
该项目将从列表中删除，但不会删除当前显示的项目。

当我单步执行代码时$ 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>

Answer 1

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

感谢Gloopy上面的评论查看Batarang，我能够看到这种情况发生。如果这对你有帮助，请给他的评论+1。

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

AngularJS：使用$ scope变量遇到一个奇怪的问题

1 个答案: