Question

这里有角度新手。我正试图绕着正确的方式完成基本模板问题。

我有一个标题，当用户未登录时应显示“单击此处登录”，并在用户登录时显示“欢迎，Dudefellah”（以及相关设置链接和诸如此类）。

我编写了一个能够返回包含登录状态和用户名的JSON包的服务，但我不知道用什么“Angular Way”来表达：“if（auth.loggedin），输出部分/ header.html中; else输出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

来自angular-app的

：

<强>的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（'login'）或（'auth'）更改状态，路由器将为您（以及URL）加载正确的模板。一般来说，使用好的路由器作为应用程序的基础并且不为每种情况提供临时解决方案要好得多。你也可以阅读一篇关于它的页面（我写的）here

Angular.js中的条件部分

3 个答案: