Как разделить данные $scope между состояниями в angularjs ui-router?

без использования службы или построения наблюдателей в Родительском контроллере, как можно было бы дать дочерним состояниям доступ к главному контроллеру $scope. 

      .state("main", {
          controller:'mainController',
          url:"/main",
          templateUrl: "main_init.html"
      })  
      .state("main.1", {
          controller:'mainController',
          parent: 'main',
          url:"/1",
          templateUrl: 'form_1.html'
      })  
      .state("main.2", {
          controller:'mainController',
          parent: 'main',
          url: "/2",
          templateUrl: 'form_2.html'
      })

Я не могу получить доступ к области mainController в дочернем состоянии-или, скорее, я получаю другой экземпляр этой области-не то, что я хочу. Я чувствую, что упускаю что-то простое. В объекте состояния есть параметр конфигурации общих данных, но я не уверен, что это должно использоваться для чего-то подобного.

5 70
javascript angularjs angular-ui-router angularjs-scope

5 ответов:

я создана рабочая plunker, показывающий, как использовать $scope и UI-маршрутизатор.

определение состояния остается неизменным:

$stateProvider
    // States
 .state("main", {
      controller:'mainController',
      url:"/main",
      templateUrl: "main_init.html"
  })  
  .state("main.1", {
      controller:'mainController',
      parent: 'main',
      url:"/1",
      templateUrl: 'form_1.html'
  })  
  .state("main.2", {
      controller:'mainController',
      parent: 'main',
      url: "/2",
      templateUrl: 'form_2.html'
  })

но каждое государство может иметь другой контроллер. Зачем? потому что каждый view каждого state получает newэкземпляр определен controller. Так что пока у нас mainController как и ниже, мы можем быть уверены, что если мы перейдем к состоянию 'main.2' он будет создан дважды.

controller('mainController', function ($scope) {
  $scope.Model = $scope.Model || {Name : "xxx"};
})

но что мы видим здесь, это мы проверяем, если $scope.Model уже exsits... а если нет (родительское состояние) мы создаем его с помощью new intance{Name : "xxx"}.

Ну, то, что я говорю: только родительское государство будет init $scope.Model. Все остальные получат то, что уже заполнено. Как? Ну вот и ответ:

наследование области по иерархии представлений Только

имейте в виду, что свойства области наследуются только по цепочке состояний, если представления ваших состояний вложены. Наследование свойств области не имеет ничего общего с вложенностью ваших состояний и все, что связано с вложенностью ваших представлений (шаблонов).

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

Итак, как указано в документации. Поскольку наши дочерние представления вложены в родительское представление, область наследуется.

Понимание Области

в AngularJS дочерняя область обычно прототипически наследует от своей родительской области.
...

С '.'в ваших моделях будет гарантировать, что прототипный наследование находится в игре. 

// So, use
<input type="text" ng-model="someObj.prop1"> 
// rather than
<input type="text" ng-model="prop1">.

и это все. Мы получаем наследство от UI-Router виды и угловые области, а потому мы Бойко использовали ссылочный тип (Model), т. е. есть '.' точка ng-model определение-теперь мы можем обмениваться данными

Примечание: имея точку '. в ng-model="Model.PropertyName просто означает, что есть reference объект Model {} С какого-то имущества: PropertyName

Регистрация рабочий пример здесь

106

вы можете получить весь спектр через $rootScope. Если вам нужна только часть области, ui-router имеет персональные данные характеристика.

вот как сделать многоступенчатую форму. Мне нужно было, чтобы маршруты содержали информацию об их шагах в потоке.

во-первых, у меня есть несколько маршрутов с UI-router:

  // Sign UP routes
  .state('sign-up', {
    abstract: true,
    url: '/sign-up',
    controller: 'SignupController',
    templateUrl: 'sign-up/index.html',
  })
  .state('sign-up.start', {
    url: '-start',
    templateUrl: 'sign-up/sign-up.start.html',
    data: { step: 0, title: 'Welcome to Mars!', },
  })
  .state('sign-up.expertise', {
    url: '-expertise',
    templateUrl: 'sign-up/sign-up.expertise.html',
    data: { step: 1, title: 'Your Expertise'},
  })

обратите внимание:

  • the data элемент в каждом маршруте.
  • The abstract государство имеет SignupController. Это единственный контроллер для этой многоступенчатой формы. Элемент abstract не требуется, но имеет смысл для этого случая использования.

SignupController.js

angular.module('app').controller('SignupController', function($scope, $state) {
  $scope.state = $state;
});

здесь мы получаем пользовательский интерфейс-роутера $state и поставить его на $scope

вот основной шаблон ' Регистрация / индекс.html',:

<h2>{{state.current.data.title}}</h2>

<div>This is a multi-step-progress control {{state.current.data.step}}</div>

<form id="signUpForm" name="signUpForm" novalidate>
  <div ui-view></div>
</form>

дочерние шаблоны могут быть все, что им нравится.

14

идея заключается в том, что вы используете объем в родитель->ребенок на наследство:

 .state("main", {
      controller:'mainController',
      abstract: true,
      url:"/main",
      templateUrl: "main_init.html"
  })  
  .state("main.1", {
      controller:'mainController1',
      parent: 'main',
      url:"/1",
      templateUrl: 'form_1.html'
  })  
  .state("main.2", {
      controller:'mainController2',
      parent: 'main',
      url: "/2",
      templateUrl: 'form_2.html'
  })

чем использование просто, у вас есть 3 контроллера, один общий (mainController) и каждый вид имеет свой собственный.

8

Если вы используете вложенные представления просто не пишите любой другой контроллер. Таким образом, они будут совместно использовать одни и те же данные контроллера.

.state("main", {
            url: "/main",
            templateUrl: "templates/Ders",
            controller: "DersController as DersC"
       }).state("main.child1", {
            url: "/child1",
            templateUrl: "templates/Ders/child1"
       }).state("main.child2", {
            url: "/child2",
            templateUrl: "templates/Ders/child2"
        })
6

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

1