" />
Вопрос:

Как использовать один и тот же контроллер на разных страницах ngRoute

46 просмотра

2 ответа

189 Репутация автора

Привет, я хочу один и тот же контроллер на разных страницах. Как передать объект на разные страницы. Ниже приведен мой пример кода.

page1.html

<body ng-app="myapp" ng-controller="studentController">
  <div>
    <table border="0">
      <tr>
        <td>
          <table>
            <tr>
              <th>Name</th>.
              <th>Marks</th>
            </tr>
            <tr ng-repeat="subject in student.subjects">
              <td> <a href="#Page2">{{ subject.name }}</a></td>
              <td>{{ subject.marks }}</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>

  <div ng-view></div>
</body>

script.js

var app = angular.module("myapp", ["ngRoute"]);

app.config(function ($routeProvider) {
  $routeProvider
    .when("/Page1", {
      template: '<h1>Page 1</h1>'
    })
    .when("/Page2", {
      templateUrl: 'Page2.html',
      controller: 'studentController'
    })
    .otherwise({
      template: '<h1>note found</h1>'
    })
});

app.controller('studentController', function ($scope) {
  $scope.student = {
    firstName: "AAA",
    lastName: "ZZZ",
    fees: 500,
    subjects: [
      { name: 'Physics', marks: 70 },
      { name: 'Chemistry', marks: 80 },
      { name: 'Math', marks: 65 },
      { name: 'English', marks: 75 },
      { name: 'Computers', marks: 67 }
    ],
  };
});

Page2.html

<body ng-app="myapp" ng-controller="studentController">
  <h1>Hello</h1>
  <h2>
    subject name -  {{ subject.name }}
  </h2>
</body>

Как передать предмет объекта со страницы 1 на страницу 2.

Я определяю тот же контроллер в конфигурации маршрута.

Есть что-нибудь, что мне нужно определить?

Автор: superuser Источник Размещён: 11.08.2019 07:15

Ответы (2)


0 плюса

381 Репутация автора

Вы можете использовать сервис для этого. В AngularJs служба является единичной, поэтому существует только один ее экземпляр, что делает ее идеально подходящей, если вы хотите обмениваться данными через разные контроллеры

app.service('studentService', function() {
   this.student = {
        firstName: "AAA",
        lastName: "ZZZ",
        fees: 500,
        subjects: [
            { name: 'Physics', marks: 70 },
            { name: 'Chemistry', marks: 80 },
            { name: 'Math', marks: 65 },
            { name: 'English', marks: 75 },
            { name: 'Computers', marks: 67 }
        ],
  };

  this.getSubjects = function () {
    return this.student.subjects;
  };
});

Затем вы можете добавить его в свой контроллер (ы):

app.controller('studentController', function ($scope, studentService) {
    $scope.subjects = studentService.getSubjects();

});
Автор: ChrisY Размещён: 11.08.2019 07:34

0 плюса

38431 Репутация автора

Как передать предмет объекта со страницы 1 на страницу 2.

Вместо передачи объекта передайте индекс.

Используйте индекс в URL в ng-repeat:

<tr ng-repeat="subject in student.subjects">
  <td> <a href="#Page2/{{$index}}">{{ subject.name }}</a></td>
  <td>{{ subject.marks }}</td>
</tr>

Определите маршрут с помощью параметра индекса:

.when("/Page2/:index", {
  templateUrl: 'Page2.html',
  controller: 'subjectController'
})

Предметный контроллер

.controller('SubjectController', function($scope, $routeParams) {
     $scope.params = $routeParams;
     $scope.subject = $scope.subjects[$routeParams.index];
})

Page2.html

<div>
  <h1>Subject index {{params.index}}</h1>
  <h2>
    subject name -  {{ subject.name }}
  </h2>
</div>

Контроллер в ng-viewэлементе будет наследовать данные от контроллера, созданного в основном приложении.

Автор: georgeawg Размещён: 11.08.2019 01:23
Вопросы из категории :
32x32