AngularJS：在$ scope值更改後視圖未更新

我想更新我視圖中ng-repeat的過濾器，因此我使用$ scope變量在控制器中進行更改。例如，下面是我的對象的JSON數組，我會在我看來迭代：

[{ 
    "address" : "#/", 
    "title" : "Home", 
    "name" : "Home", 
    "category": "loggedIn loggedOut" 
}, { 
    "address" : "#/logout", 
    "title" : "Logout", 
    "name" : "Logout", 
    "category": "loggedIn" 
}, { 
    "address" : "#/register", 
    "title" : "Register", 
    "name" : "Register", 
    "category": "loggedOut" 
}, { 
    "address" : "#/login", 
    "title" : "Login", 
    "name" : "Login", 
    "category": "loggedOut" 
}]

被分配到$ scope.menuLinks。我也有一個$ scope.menuFilter =「loggedIn」;用於過濾。

這是我的觀點，我想更新： menu.html

<div ng-controller="MenuController as menuCtrl"> 
    <ul id="menu"> 
     <li ng-repeat="link in menuLinks | filter:menuFilter"><a 
      href="{{link.address}}" title="{{link.title}}">{{link.name}}</a> </li> 
    </ul> 
</div>

這裏是我的控制器，它改變了$ scope.menuFilter：

function LogoutController($scope, $http, $location) { 
    var sessionkey = localStorage.getItem("sessionkey"); 

    $http({ 
     method : 'PUT', 
     url : url + "/user/logout", 
     headers : { 
      'sessionkey' : sessionkey 
     } 
    }).success(function(data) { 
     sessionkey = ""; 
     localStorage.setItem("sessionkey", sessionkey); 
     $location.path('/'); 
     $scope.menuFilter = "loggedOut"; 
    }); 
}

但當LogoutController是所謂，視圖不會改變，我必須刷新頁面才能看到更改的視圖。如果我添加$ scope。$ apply（）;在$ scope.menuFilter =「loggedOut」後面;那麼我得到和錯誤：[$ rootScope：inprog] $ digest已在進行中

我在做什麼錯？ $ scope值更改後應如何更新視圖？

來源

2014-05-17 Simeon Nikolov

您正在修改控制器的範圍，而您需要修改ngRepeat的範圍。解決這個問題的最簡單的方法是使用上會得到prototypically繼承，因此，當你更新控制器範圍內的對象時，ngRepeat將反映這一變化：

$scope.filters = { 
    menuFilter: "loggedIn" 
}

然後在你的標記：

<li ng-repeat="link in menuLinks | filter:filters.menuFilter"><a 
      href="{{link.address}}" title="{{link.title}}">{{link.name}}</a></li>

最後，當你在控制器更新：

$scope.filters.menuFilter = "loggedOut";

有關範圍繼承/詳細信息JavaScript的原型繼承檢查出這太問題：

What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

來源

2014-05-17 16:14:24 Daniel

我想你的建議，但隨後我收到另一個錯誤 - 類型錯誤：無法未定義設置屬性「menuFilter」。也許我沒有提到我在另一個控制器中更改$ scope.menuFilter或$ scope.filters.menuFilter。我發現$ rootScope在某些情況下也被使用，並且在我的代碼中嘗試了它，並且它終於有效。我試過了，沒有使用原型繼承的對象 - $ scope.filters = {menuFilter ...}，它仍然有效。那麼$ scope是否意味着只有控制器範圍，$ rootScope是全局範圍？我將不得不閱讀更多關於差異以及何時使用的內容。 –

通常，您應該堅持使用控制器$範圍，以免污染全局範圍（$ rootScope）。如果您仍然遇到麻煩，請在plnkr.co上創建一個示例，我可以查看一下。 – Daniel

AngularJS：在$ scope值更改後視圖未更新

回答

相關問題