0

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

在网站 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 上的用户对象。但这感觉很hacky。

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

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

4

2 回答 2

0

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

于 2013-07-29T15:29:31.013 回答
0

您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        
     };
});

边栏控制器：

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

关于此解决方案需要注意的要点：

  1. UserService（像所有服务一样）是单例的——这意味着一个实例在所有控制器和指令之间共享。
  2. UserService.data 最初返回一个空对象字面量，但在$http.get异步调用后会更新它。
  3. 所有属性（包括loggedIn）都存储在对象字面量中。这样我们就不会在绑定到作用域时按值传递。
  4. 所有范围绑定都是通过引用（而不是通过值）。所以当 UserService.data 发生变化时，它会自动更新所有正在观察它的独立作用域。
  5. 永远不需要 rootScope。

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

于 2014-06-08T14:58:50.830 回答