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值更改后视图未更新

回答

相关问题