Angularjs：指令更新在

我有一個登錄屏幕，並顯示在該網站用戶的喜愛的物品在網站上的小工具應用程序用戶登錄後查看。Angularjs：指令更新在

在該網站的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調用該服務，在用戶登錄後，但我不知道應該做什麼。

如果我在登錄後刷新頁面，它會立即生效，因爲用戶會話在初始頁面加載開始時在服務器端可用。

來源

2013-07-29 Sander

如果您的UserService更新$ rootScope.user，您可以從SideBarController中仔細觀察$ rootScope.user並更新$ scope.myFavorites。

來源

2013-07-29 15:29:31 Luca

感覺哈克，我正在尋找在角像骨幹事件系統，因爲基於此的rootScope.user是一個依賴我不想說的，但你是對有關解決方案，如果我看該用戶對象我可以使其工作。我只是不確定它是否是最好的方式:) – Sander

您可以使用$ scope。$ emit（）和$ scope。$ on（）作爲事件系統。 – Luca

嗯感謝那，我不得不使用$ rootScope，雖然，作爲一個全球性的事件聚合器。因爲我相信如果你正在傾聽多個指令共享的事件，就不可能使用本地的$ scope，但是仍然要感謝提示... – Sander

你的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從不需要。

我更喜歡這種方法，因爲它更模塊化，具有更少的外部依賴性（即在根作用域上）。

來源

2014-06-08 14:58:50 pixelbits

Angularjs：指令更新在

回答

相關問題