Question

我很擅长使用AngularJS，并尝试使用静态导航栏创建一个简单的概念证明，以选择您想要执行的操作。目前我正在使用我的index.html文件作为＆＃34;模板＆＃34;其中包括导航栏的HTML，然后是$ routeProvider的ng-view。

＆＃13;

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" class="no-js">
<!--<![endif]-->

<head>


</head>

<body class="container">

  <!-- Static navbar -->
  <nav class="navbar navbar-default navbar-fixed-top" ng-controller="NavController">
    <!-- navbar buttons, links, etc. -->
  </nav>


  <div ng-view>
  </div>

  <!-- all the javascript imports down here . . . -->

</html>

＆＃13;

我尝试做的是使用控制器（ NavController ）来控制不同链接的可见性，具体取决于用户是否登录。当我最初访问着陆页时，事情似乎很好，但是当我将事物路由到不同的视图时，似乎 NavController 会丢失范围或其他内容。

例如，如果我转到我的应用中的另一个链接并查看调试器中的范围，我会看到{ This scope has no models }。如果我点击刷新并再次查看范围，我会看到我期望的数据，看起来是正确的。

我做了一些测试，试图解决问题，并注意到如果我在ng-view中引用 NavController ，那么一切正常，所以我假设我要做的事情错误的方法。是否有某种方法可以获得此功能？

Answer 1

识别经过身份验证的用户的最佳方法是使用存储有关用户登录信息的服务。这是您定义服务的方式：

services.factory('UserService', [function() {
  var sdo = {
    isLogged: false,
    username: ''
  };
  return sdo;
}]);

下一步是将您的服务注入每个需要检查用户是否已登录的控制器：

ctrl.controller('loginCtrl', ['$scope', '$http', 'UserService', 
  function(scope, $http, User) { /* ... */ }]);

代码示例取自：http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app/

用户身份验证技术的另一个好资源是：https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

希望这有帮助。

Answer 2

我能够找出问题所在。我没有正确访问我服务中的值。

我在这里整理了一个快速示例，显示了正常工作： http://plnkr.co/edit/ihiEqKPHt8qoLT2dG6nl

来自@jusio的答案here帮助我了解了发生了什么以及为什么我会看到问题。我没有正确地将控制器中的属性绑定到服务中的函数。我链接的Plunker下面的代码段显示了我如何在服务器控制器视图之间为控制器中的 status 属性正确绑定内容。

.controller('v2Control', ['$scope', '$log', '$location', 'LoginService',
  function(sc, log, loc, ls) {
    sc.text = "#2"
    sc.status = ls.isVerified;

    sc.setLoggedIn = function() {
      ls.validateSession();
    }

    sc.setLoggedOut = function() {
      ls.killSession();
    }

  }
])

.factory('LoginService', ['$log', '$http',
  function(log, http) {
    var service = {};
    var verified;

    service.isVerified = function() {
      return verified;
    };

    (function() {
      if (service.verified === undefined)
        verified = 'false'
    })();

    service.validateSession = function() {
      verified = 'true';
    };
    service.killSession = function() {
      verified = false;
    };

    return service;
  }
]);

<div class="v2" ng-controller="v2Control">

  <p>This is view {{text}}</p>
  <button type="button" class="btn btn-primary" ng-click="setLoggedIn()">Log In</button>
  <button type="button" class="btn btn-primary" ng-click="setLoggedOut()">Log Out</button>
  <p>The user is logged in: <strong>{{status()}}</strong> 
  </p>
</div>

使用AngularJS在视图外部使用控制器

2 个答案: