1

角新手在这里。我试图用正确的方法来完成一个基本的模板问题。

我有一个标题，当用户未登录时应显示“单击此处登录”，当用户登录时应显示“Welcome, Dudefellah”（以及相关的设置链接等）。

我编写了一个服务，它能够返回一个 JSON 包，包括登录状态和用户名，但我不知道用什么“角度方式”来表达：“if(auth.loggedin), output partials/header.html ; 否则输出 partials/header_login.html”。

我不清楚这个逻辑是否属于控制器，或者某种“auth”模型，甚至是视图（这不可能是对的，对吧？）。任何帮助将不胜感激。

4

3 回答 3

14

一旦获取登录状态，在控制器中创建一个范围变量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>
于 2013-03-28T15:52:11.063 回答
8

有一个名为angular-app的示例 Angular 应用程序做得很好。他们有一个安全服务，然后是一个工具栏部分和指令，根据状态显示事物。

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

从角度应用程序：

src/common/security/login/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/common/security/login/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;
}]);
于 2013-03-28T16:02:12.337 回答
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('login') 或 ('auth') 更改状态，路由器将为您加载正确的模板（以及 URL）。一般来说，最好使用一个好的路由器作为您的应用程序的基础，而不是针对每种情况提供临时解决方案。你也可以在这里阅读一个页面（我写的）

于 2013-07-19T15:17:14.170 回答