Angular.js中的有條件偏分集

Question

這裏有角新手。我試圖圍繞正確的方式來完成一個基本的模板問題。

我有一個頭，當用戶登錄其應爲「點擊這裏登錄」當用戶沒有登錄，並「歡迎，Dudefellah」（以及相關的設置鏈接和諸如此類的東西）。

我寫了一個服務，能夠返回包括登錄狀態和用戶名的JSON包，但我不知道用什麼「Angular Way」表示：「if（auth.loggedin），output partials/header html的;否則輸出partials/header_login.html「。

我不清楚這個邏輯是屬於控制器還是某種「auth」模型，甚至在視圖中（不可能是對的，對吧？）。任何援助將不勝感激。

Answer 1

內的控制器一旦登錄狀態是牽強創建變量的作用域headerTemplate並根據登錄狀態

function MyCtrl($scope, loginService) { 
    $scope.auth = loginService.getLoginState(); 
    $scope.headerTemplate = $scope.auth ? 'partials/header.html' : 'partials/header_login.html'; 
} 

在您的標記

<div ng-include src="headerTemplate"></div> 

Answer 2

有一個指定的模板的名稱示例角度應用程序angular-app，這確實很好。他們有一個安全服務，然後是一個工具欄部分和指令，根據狀態顯示事情。

https://github.com/angular-app/angular-app/tree/master/client/src/common/security

從角應用程式：

SRC /普通/安全/登錄/ toolbar.tpl.html：

<ul class="nav pull-right"> 
    <li class="divider-vertical"></li> 
    <li ng-show="isAuthenticated()"> 
     <a href="#">{{currentUser.firstName}} {{currentUser.lastName}}</a> 
    </li> 
    <li ng-show="isAuthenticated()" class="logout"> 
     <form class="navbar-form"> 
      <button class="btn logout" ng-click="logout()">Log out</button> 
     </form> 
    </li> 
    <li ng-hide="isAuthenticated()" class="login"> 
     <form class="navbar-form"> 
      <button class="btn login" ng-click="login()">Log in</button> 
     </form> 
    </li> 
</ul> 

SRC /普通/安全/登錄/ toolbar.js：

angular.module('security.login.toolbar', []) 

// The loginToolbar directive is a reusable widget that can show login or logout buttons 
// and information the current authenticated user 
.directive('loginToolbar', ['security', function(security) { 
    var directive = { 
    templateUrl: 'security/login/toolbar.tpl.html', 
    restrict: 'E', 
    replace: true, 
    scope: true, 
    link: function($scope, $element, $attrs, $controller) { 
     $scope.isAuthenticated = security.isAuthenticated; 
     $scope.login = security.showLogin; 
     $scope.logout = security.logout; 
     $scope.$watch(function() { 
     return security.currentUser; 
     }, function(currentUser) { 
     $scope.currentUser = currentUser; 
     }); 
    } 
    }; 
    return directive; 
}]); 

Answer 3

您也可以使用ui-router，它爲有條件的路由和一般的良好基礎設施創造了奇蹟。你需要定義兩種狀態：

myapp.config(function($stateProvider, $urlRouterProvider){ 
    ... 
    // Now set up the states 
    $stateProvider 
    .state('login', { 
     parent: account, 
     url: "/login", 
     templateUrl: "partials/header_login.html" 
    }) 

    .state('auth', { 
     parent: account, 
     url: "/authorized", 
     templateUrl: "partials/header.html" 
    }) 

}) 

，當你從你的查詢回來，由$ state.transitionTo（「登錄」）或改變狀態（「權威性」）和路由器將加載正確的模板爲你（也是網址）。總的來說，使用優秀的路由器作爲您的應用的基礎更好，並且不會爲每種情況提供臨時解決方案。你也可以閱讀關於它的一頁（我寫到）here