Question

我是AngularJS的新手，我不知道我是否正确地做事。我有一个欢迎和登录页面。我希望能够登录登录页面，然后登录我的应用程序的任何页面。我知道localStorage或cookies会比存储会话数据的服务更好，但我想尝试一下。当我在登录部分视图中使用我的服务连接用户时，控制器的会话变量不会更新。为什么呢？

我想这个问题很容易修复，因为我错过了一些东西。

提前感谢您的时间。

哈拉尔德

代码如下：

模板html：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Yahoo 2014 - Welcome</title>

  <link rel="icon" type="image/png" href="img/favicon.png">

  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/animations.css">
  <link rel="stylesheet" href="css/template.css">

  <script src="lib/jquery/jquery-1.10.2.js"></script>

</head>
<body ng-controller="AppCtrl">

  <header>
  <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="row">
        <div class="col xs-12 col-sm-12 col-md-12 col-lg-12">
          <div class="navbar-header">
            <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="index.html"><img src="img/logo.png" alt="Yahoo logo" class="img-responsive navbar-brand"/></a>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li><a href="#/group">Groupe</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="software.html">Logiciels</a></li>
              <li><a href="sectors.html">Secteurs</a></li>
              <li><a href="join_us.html">Rejoignez-nous</a></li>
              <li><a href="investors.html">Investisseurs</a></li>
              <li><a href="http://www.yahoo.com/">English version</a></li>
              <li ng-hide="connected" ><a href="#/login">Login</a></li>
              <li ng-hide="!connected"><a href="#/profile" ng-bind="nickname"> </a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </nav>
  </header>

  <div ng-view></div>

  {{connected}}
  {{username}}

  <footer>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="row">
          <div class="col xs-12 col-sm-12 col-md-12 col-lg-12">
            <ul class="nav navbar-nav">
              <li><a href="legal.html">Mentions légales</a></li>
              <li><a href="website_plan.html">Plan du site</a></li>
              <li><a href="mailto:webmaster@infotel.com">Contacter l'administrateur</a></li>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="col xs-4 col-sm-4 col-md-4 col-lg-4">
            <p>© Copyright Yahoo 2014</p>
          </div>
        </div>
      </div>
    </nav>
  </footer>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="../bower_components/angular/angular.js"></script>
  <script src="../bower_components/angular-route/angular-route.js"></script>
  <script src="lib/angular/angular-animate.js"></script>
  <script src="lib/angular/angular-resource.js"></script>
  <script src="lib/bootstrap/bootstrap.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

Index.html部分视图

<div id="content">
  <div class="container-fluid">

    <div class="row">
      <div class="col xs-12 col-sm-12 col-md-12 col-lg-12"><a id="bannerlink" href="http://www.yahoo.com"><img id="bannerimage" src="img/slider-mobile1.jpg" alt="Banner image" class="img-responsive"></a></div>
    </div>

    <div class="row">

      <div class="articles" ng-repeat="article in articles">
          <div class="col xs-4 col-sm-4 col-md-4 col-lg-4">
            <h3>{{article.title}}</h3>
            <p>{{article.content}}</p>
          </div>
      </div>

    </div>

  </div>

</div>

登录html局部视图：

<div id="content" ng-controller="LoginCtrl">
  <form name="login" action="#" ng-submit="login()">
    <table>
      <tr>
        <td>
          <p>Nickname</p>
        </td>
        <td>
          <input type="text" name="nickname" ng-model="nickname" required>
        </td>
      </tr>
      <tr>
        <td>
          <p>Password</p>
        </td>
        <td>
          <input type="password" name="password" ng-model="password" required>
        </td>
      </tr>
    </table>
    <input type="submit" id="submit" value="Submit">
  </form>
</div>

App.js：

'use strict';


// Declare app level module which depends on filters, and services
angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/index', {templateUrl: 'partials/index.html', controller: 'IndexCtrl'});
  $routeProvider.when('/group', {templateUrl: 'partials/group.html', controller: 'GroupCtrl'});
  $routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'LoginCtrl'});
  $routeProvider.otherwise({redirectTo: '/index'});
}]);

控制器：

'use strict';

/* Controllers */

angular.module('myApp.controllers', [])
  .controller('AppCtrl', ['$scope', 'Session', function(scope, Session) {

    scope.connected=Session.isConnected();

    scope.username="Harald";

    scope.login = Session.connect();

    scope.disconnect = Session.disconnect();

    scope.$watch('connected', function(){
        alert("Connected changed!");
    });


  }])
  .controller('IndexCtrl', [ '$scope', 'Article', function(scope, Article) {

    scope.articles = Article.query();

  }])
  .controller('GroupCtrl', [function() {

  }])
  .controller('LoginCtrl', [ '$scope', 'Session', function(scope, Session) {

    scope.connected=Session.isConnected();

    scope.login = Session.connect();

    scope.disconnect = Session.disconnect();

  }]);

服务：

'use strict';

/* Services */


// Demonstrate how to register services
// In this case it is a simple value service.
var myAppServices = angular.module('myApp.services', ['ngResource']).
  value('version', '0.1');

myAppServices
.factory('Article', ['$resource',
  function(resource){
    return resource('articles/:articleId.json', {}, {
      query: {method:'GET', params:{articleId:'articles'}, isArray:true}
    });
  }])
.factory('Session', function() {

        var connected = false;
        var nickname = "unknown";

        return{
            isConnected : function() {
                return connected;
            },

            getNickname : function() {
                return nickname;
            },

            connect : function() {
                connected = true;
                window.alert("Connected service!");
            },

            disconnect : function() {
                connected = false;
            }
        }
  });

Answer 1

isConnected()返回一个布尔值。当您更改服务中的connected时，会为其指定一个新值，但这不会影响$scope.connected

您可以使用监视功能使两者保持同步：

scope.$watch(Session.isConnected, function(connected){
    $scope.connected = connected;
});

Answer 2

根据我的理解并纠正我，如果我错了。您希望在服务中存储状态，并在路由更改时检查该状态，以查看用户是否已登录，而不使用cookie或本地存储。但是，仅在服务中存储用户状态将不起作用，就好像用户点击刷新按钮一样，服务将是未定义的，不再有效。

AngularJS在不同局部视图的控制器之间共享会话数据？

2 个答案: