Question

我有一个应用程序，其中包含登录屏幕和网站上的小部件，显示用户在网站中最喜欢的项目。

在网站html中

<header data-ng-controller="SideBarController">
    <section id="sidebar">
        <div sidebar-user-info></div>
        <div sidebar-my-favorites-list></div>
        <p class="full"><a href="#/logout">logout</a></p>
    </section>
</header>

内嵌模板块

<script id="sideBarFavoritesList_template" type="text/ng-template">
    <ul id="my-favorites" class="full no-bullets">
        <li data-ng-repeat="fav in myFavorites">
            <a href="#" id="{{fav.id}}"><img ng-src="/gfx/apps/icons{{ fav.icon }}" width="36" height="36" alt="{{ fav.name }} icoon" class="favicon">{{ fav.name }}</a>
        </li>
    </ul>
</script>

然后我有一个渲染小部件的指令

App.directive('sidebarMyFavoritesList', ['$rootScope', function sideBarMyfavoritesList($rootScope) {
    return {
        template: $('#sideBarFavoritesList_template').html(),
        restrict: 'A',
        replace: true
    };
}]);

围绕整个侧边栏的控制器

function SideBarController($http, $scope, $rootScope, helper, UserService)
{
    $rootScope.user = UserService.data;
    $rootScope.loggedIn = UserService.isLogged;

    $scope.toggleBar = function toggleBar() {
        if (!UserService.isLogged) {
            return;
        }
        $rootScope.state.appbar = !$rootScope.state.appbar;
    };

    var serviceUrl = "/api/favorites/user";
    $http.get(serviceUrl).success(function(d) {
        $scope.myFavorites = d.data;
    });
}

现在，用户登录时会更新UserService，但边栏始终存在。我想要的是侧边栏自我刷新并呈现用户的最爱。

它适用于用户信息，因为我发现自己使用rootScope，在用户成功登录后我更新了rootScope上的用户对象。但这感觉非常黑客。

我看到它的方式，我必须在用户登录后重做对该服务的ajax调用，但我不知道应该在哪里完成。

如果我在登录后刷新页面，它会立即生效，因为在初始页面加载开始时用户会话在服务器端可用。

Answer 1

如果您的UserService更新$ rootScope.user，您可以从SideBarController中悄悄地观看$ rootScope.user并更新$ scope.myFavorites。

Answer 2

您的UserService.data应该返回一个对象字面值。看看你的代码，我不能确定它是否是一个字符串或它正在返回的对象文字。重要的是它是一个对象文字，因为那样你可以通过引用传递，并且相同的引用可以用于绑定到独立的范围。绑定到rootScope变得不必要了。

<强>服务

app.factory('UserService', function() {
     var user = {};
     var serviceUrl = "/api/favorites/user";
         $http.get(serviceUrl).success(function(d) {
         angular.extend(user,d.data);
     });

     return {
        data:user        
     };
});

<强> SideBarController：

app.controller('SideBarController', function($scope, UserService) {
      $scope.loginInfo = UserService.data;
});

关于此解决方案的重要注意事项：

UserService（与所有服务一样）是单例 - 意味着所有控制器和指令之间共享一个实例。
UserService.data最初返回一个空对象文字，但是在异步调用$http.get后更新它。
所有属性（包括loggedIn）都存储在对象文字中。这样我们就不会在绑定到范围时传递值。
所有范围绑定都是通过引用（而不是值）。因此，当UserService.data发生更改时，它将自动更新正在观看它的所有独立范围。
永远不需要rootScope。

我更喜欢这种方法，因为它更模块化，外部依赖性更少（即在根范围内）。

Angularjs：用户登录后指令更新视图

2 个答案: