如何使用UI路由器改变状态时保留范围的数据？

Question

我建立使用与UI路由器AngularJS单个页面的Web应用程序。我有两个不同的状态，一个家长和一个孩子。在父状态，“点”，用户可以进行从纳克重复的选择和使用的范围中示出它们的选择。

当用户的选择，我NG-单击射击，它使用$ state.go加载子状态“细节”的功能。我想加载在子状态的选择，但现在看来，该范围的数据没有了吗？

我一直在使用每个状态相同的控制器尝试。 UI-SREF也不起作用。

从父状态HTML模板

<div class="card-column mx-0" data-ng-click="makeSelection = true">

 <div class="card mx-0 mb-3 ng-scope" data-ng-click="showSpot(spot);" data-ng-repeat="spot in spots | filter:{'game':gameID} | filter:{'walking':distanceID} | filter:{'vehicle':vehicleID} | orderBy:'price' | filter as results">
   <div class="row no-gutters">

    <div class="col-sm-12 col-md-3 col-lg-3">
      <img src="{{ spot.image }}" alt="parking spot"/>
    </div>

    <div class="col-sm-12 col-md-9 col-lg-9">
      <div class="card-body px-4 pt-4">

        <h6 class="text-small-extra text-muted font-weight-normal text-uppercase"><span style="letter-spacing: .05rem;">{{ spot.type }}</span></h6>

        <h5 class="card-title">{{ spot.address }}</h5>

        <h4 class="text-muted float-md-right">${{ spot.price }}<span style="font-size: 1rem; font-weight: 400">/day</span></h4>

      </div>

    </div>

  </div>

</div>

从控制器片断

$scope.showDetails = function() {
  $state.go('spots.details'); //my route...
}

$scope.showSpot = function(spot) {
  $scope.spot = spot;
  $scope.showDetails();
}

从app.js片断

.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise("/")

$stateProvider
.state('spots',{
  url: '/',
  templateUrl: "/parkit/master/spots-available.html",
  controller: 'parkitController'
})
.state('details', {
  parent: 'spots',
  url: '/details',
  templateUrl: '/parkit/master/details.html',
})
.state('statetwo', {
  url: '/statetwo',
  template: '<h1>State Two</h1>',
  controller: 'parkitController'
});

})

我希望用户选择对孩子的状态显示NG-点击触发后。

Answer 1

您需要下架的继承原型是如何工作的。当父母把与范围的属性值

$scope.value = 'something';

在子组件，如果你访问$ scope.value继承链会发现$ scope.value。

如果孩子套

$scope.otherValue = 'something';

如果遵循继承链，没有找到otherValue的值，并创建在子范围属性，而不是继承的原型，以父组件和家长的任何其他孩子看不出来。

您可以使用所谓原型继承的点规则。如果父上创建的范围对象调用像数据

$scope.data = { value: 'something' };

现在，如果孩子把一个属性的数据对象

$scope.data.otherValue = 'something';

它会查找数据对象，发现它在继承链，因为你将属性添加到对象的实例，这是家长和家长的任何子女可见。

let parent = {
  value: 'some value',
  data: { value: 'some value' }
};

let child = Object.create(parent);

console.log(child.value); // Finds value on the prototype chain

child.newValue = 'new value'; // Does not affect the parent

console.log(parent.newValue);

child.data.newValue = 'new value'; // newValue is visible to the parent

console.log(parent.data.newValue);

简短的回答是从来没有注入$范围和使用controllerAs语法。

要共享控制器之间的数据使用将注入到两个控制器的服务。您对服务点的收集和使用路由参数去找出其他的控制器应使用或对所谓currentSpot由其他控制器设置的服务的地方进行现场。

服务是可以在模块级创建，然后在自己的依赖列表要求他们所有控制器得到相同的实例的单个对象。他们共享控制器之间的数据的首选方式，$范围层次结构必然导致混乱，因为他们的原型继承性质可能会造成混淆。一个孩子$范围prototypally继承了它的父，这似乎是你应该共享数据，但是当孩子控制器设置属性是不父可见。

你学的角度编程是一种过时的。注射$范围已不再是推荐的方式。看看使用的组件。部件是用于与分离的范围，并使用contollerAs语法的控制器的包装。隔离范围使它更清洁知道在哪里的数据从何而来。

看看我的回答对这个问题

Trying to activate a checkbox from a controller that lives in another controller