Как получить доступ к объекту $ scope из нескольких шаблонов? - PullRequest
Новая
       43

Как получить доступ к объекту $ scope из нескольких шаблонов?

0 голосов
/ 15 декабря 2018

Я пытаюсь войти в API с именем пользователя и паролем, а затем получить токен, использовать его для получения некоторых ресурсов, во-первых, это пост-запрос, а во-вторых, запрос на получение.оба запроса сделаны, и я проверил объект области, я получил и $ 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, заранее спасибо.Пожалуйста, дайте мне знать, если что-то неясно

1 Ответ

0 голосов
/ 15 декабря 2018

Если вы перенаправите в другое место (домой, ...), вы потеряете данные на стороне клиента.Вы должны получить данные с сервера снова или не перенаправлять, а только изменять состояние (используйте одностраничные функции).Также, если вы хотите обмениваться данными между контроллерами, вы можете использовать «фабрики» или «сервисы».

...