AngularJS：使用$ scope變量遇到一個奇怪的問題

在下面的代碼中，無論何時從列表中的刪除鏈接中刪除一個項目，它只會從列表中刪除項目，但不會刪除當前選定的項目。（一旦你點擊它就顯示該項目）。但是，如果您單擊當前選定項目旁邊的刪除鏈接，它將從兩個位置刪除。

要複製我所看到的：

在文本框中鍵入並按下回車鍵幾次添加了一堆物品。
從列表中選擇一個項目。
當它顯示在下面時，點擊該項旁邊的刪除。
這是正確的行爲。
選擇您之前創建的另一個項目。
現在點擊列表中項目旁邊的刪除鏈接。
項目從列表中刪除，但不是當前顯示的項目。

當我點擊列表中的刪除鏈接時，進入代碼$ 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>

來源

2012-07-31 Ben Lesh

看起來它可能與單擊鏈接以顯示項目時模板中綁定項目的實際範圍有所不同。 – 2012-07-31 22:26:07

如果您還沒有嘗試過，請查看AngularJS Batarang Chrome擴展程序來解決範圍問題：https：//github.com/angular/angularjs-batarang – Gloopy 2012-07-31 22:31:10

太棒了，我還沒有看到這個。 – 2012-07-31 22:34:06

原來，從列表中選擇一個用戶實際上也創造了一個全新的範圍，這是從用於綁定列表中的一個單獨的。

感謝Gloopy的評論以上檢查Batarang，我能夠看到這種情況發生。如果這有助於你，請給他的評論+1。

根據the documentation on Scopes某些指令實際上會導致創建新的範圍。我假設點擊由$ routeProvider處理的鏈接也會導致創建一個全新的範圍樹，可能是因爲它創建了該控制器的另一個實例。

來源

2012-08-01 00:03:50

AngularJS：使用$ scope變量遇到一個奇怪的問題

回答

相關問題