首页 文章

AngularJS：$ scope值更改后视图未更新

提问于
浏览 次
0

我想在我的视图中更新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值更改后，我应该如何更新视图？

javascript angularjs view scope

1 回答

  • 0

    您正在修改控制器的范围，而您需要修改ngRepeat的范围 . 解决此问题的最简单方法是使用控制器作用域上的一个对象，该对象将获得原型继承，因此当您更新它时，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原型继承的更多信息，请查看此SO问题：

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

    回复于

相关问题