Question

我正在尝试使用用户名和密码登录到API，然后使用令牌来获取一些资源，首先是发布请求，其次是get请求。这两个请求都发出了，我检查了作用域对象，我得到了$ scope.userInfo和$ scope.projects。问题是，登录后，我将重定向到另一个模板的主页，并尝试从那里访问$ scope，但是我什么也没得到

controller.js

/*jshint esversion: 6 */
var app = angular.module('main', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: './components/welcome.html',
    controller: 'LoginController'
  }).when('/home', {
    templateUrl: './components/home.html',
    controller: 'LoginController'
  }).otherwise({
    template: '404 Resource Not Found'
  });
});

app.controller('LoginController', function($scope, $http, $location) {
  $scope.login = function() {
    var { username, password } = $scope;
    $http({
      url: 'url',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Client-Type': 'browser'
      },
      data: { username, password }
    }).then(function(response) {
      $scope.userInfo = response.data;
      console.log(response.data);
    }).then(function() {
      $http({
        method: 'GET',
        url: 'url2',
        headers: {
          'Content-Type': 'application/json',
          'X-Authtoken': $scope.userInfo.authtoken
        },
      }).then(function(response) {
        $scope.projects = response.data;
      }).then(function() {
        $location.path('/home');
      });
    });
  };
});

welcome.html

<div class="d-flex justify-content-center">
  <div class="d-flex justify-content-center">
        <div class="card">
            <div class="card-header">
                <h3>Sign In</h3>
            </div>
            <div class="card-body">
                <form>
                    <div class="input-group form-group">
                        <input type="text" class="form-control" placeholder="username" ng-model="username">
                    </div>
                    <div class="input-group form-group">
                        <input type="password" class="form-control" placeholder="password" ng-model="password">
                    </div>
                    <div class="form-group">
              <button class="btn float-right login_btn" ng-click="login()">Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

home.html

<div ng-controller="LoginController">
  <h1>Welcome username!</h1>
  <div class="user-details-container">
   <div class="row">
      <div class="col-md-6 img">
        <img src="image-source"  alt="" class="img-rounded"> user avatar
        <img src={{user.avatar}} />
      </div>
      <div class="col-md-6 details">
        <blockquote>
          <h5>User Template</h5>
          <h5>{{userInfo.user.name}} //</h5>
          <small><cite title="Source Title">Vancouver, BC Canada  <i class="fa fa-map-marker"></i></cite></small>
        </blockquote>
        <p>
          user details...
        </p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
        <table class="table table-bordered success">
                <thead>
                    <tr class='text-primary'>
                        <th>#</th>
                        <th>Project</th>
                    </tr>
               </thead>
               <tbody>
                   <tr ng-repeat="project in projects">
                      <th>//{{project.number}}</th>
                      <th>//{{project.name}}</th>
                  </tr>
                  <tr>
                     <th>2</th>
                    <th>second project</th>
                 </tr>
              </tbody>
        </table>
    </div>
   </div>
 </div>

我是angularJS的新手，谢谢。请让我知道是否有不清楚的地方

Answer 1

如果您重定向到另一个地方（家，...），则会丢失客户端数据。您应该再次从服务器获取数据，或者不要重定向而仅更改状态（使用单页功能）。另外，如果要在控制器之间共享数据，则可以使用“工厂”或“服务”。

如何从多个模板访问$ scope对象？

1 个答案: