在状态之间传递对象答案

【问题标题】：Passing an object between states在状态之间传递对象
【发布时间】：2016-04-07 01:21:24
【问题描述】：

我一直在尝试将在模板 page1 中单击的对象传递给另一个使用 angular 的名为 page2 的模板。我可以使用 ng-click 访问此对象，但无法将其传递给其他模板。我已经阅读了使用 state.go() 可能有效，但我无法弄清楚这一点。如果 state.go() 不是一个好主意，我应该改用什么？

angular.module('playground', [])

.config(function($stateProvider, $urlRouterProvider) {
  "use strict";

  /* Set up the states for the application's different sections. */
  $stateProvider
    .state('page1', {
      name: 'page1',
      url: '/page1',
      templateUrl: 'page1.html',
      controller: 'MainCtrl'
    })
    .state('page2', {
      name: 'page2',
      url: '/page2',
      templateUrl: 'page2.html',
      controller: 'MainCtrl'
    });
  $urlRouterProvider.otherwise('/page1');

})

.controller('MainCtrl', function($scope, $state) {
  "use strict";


  $scope.add = function(item, $stateParams) {
    if ($scope.ordered.indexOf(item) > -1) {

      //nothing for now

    } else {

      $scope.ordered.push(item);

    }

    console.log($scope.ordered);
  };

  $scope.ordered = []

  $scope.menu = [{
    title: 'Pizza',
    type: 'entree',
    favorite: true,
    price: 10
  }, {
    title: 'Tacos',
    type: 'entree',
    favorite: false,
    price: 5
  }, {
    title: 'Onion Rings',
    type: 'app',
    favorite: false,
    price: 2
  }, {
    title: 'Ice Cream',
    type: 'dessert',
    favorite: false,
    price: 11
  }, {
    title: 'Mac n Cheese',
    type: 'app',
    favorite: false,
    price: 7
  }, {
    title: 'Salad',
    type: 'salad',
    favorite: true,
    price: 4
  }];


  $scope.ordered = [];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="playground" ng-controller="MainCtrl">
  <script id="page1.html" type="text/ng-template">
    <div ng-repeat="item in menu">

      <p>{{item.title}}</p>

      <p>{{item.type}}</p>
      <button ng-click="add(item);">add</button>

    </div>
  </script>

  <script id="page2.html" type="text/ng-template">
    <div ng-repeat="item in ordered">

      <p>{{item.title}}</p>

      <p>{{item.type}}</p>
      <button>remove</button>

    </div>
  </script>

</body>

【问题讨论】：

标签： javascript angularjs object

【解决方案1】：

当你想共享数据时，你可以使用angular service，因为所有的angular service都是singletons，所以你可以很方便的在controllers和states之间共享数据。

例如：

控制器 1

(() => {

  function Controller1($scope, Service) {

    $scope.test = 'In Controller 1';

    $scope.service = Service;

    $scope.menu = [
      {
      title: 'Pizza',
      type: 'entree',
      favorite: true,
      price: 10
      }, 
      {
        title: 'Tacos',
        type: 'entree',
        favorite: false,
        price: 5
      }, 
      {
        title: 'Onion Rings',
        type: 'app',
        favorite: false,
        price: 2
      }, 
      {
        title: 'Ice Cream',
        type: 'dessert',
        favorite: false,
        price: 11
      }, 
      {
        title: 'Mac n Cheese',
        type: 'app',
        favorite: false,
        price: 7
      }, 
      {
        title: 'Salad',
        type: 'salad',
        favorite: true,
        price: 4
      }
    ];

    setTimeout(() => {
      //Assign our data to the data service
      Service.data = $scope.menu;
      //Update the bindings
      $scope.$apply();
    }, 1000);


  }

  angular
    .module('app', [])
    .controller('Ctrl1', Controller1);

})();

控制器 2

(() => {

  function Controller2($scope, Service) {

    $scope.test = 'In Controller 2';

    //Retrieve instance of our data Service
    $scope.service = Service;

  }

  angular
    .module('app')
    .controller('Ctrl2', Controller2);

})();

服务

(() => {

  function Service() {

    const obj = {
      data: ''
    };

    return obj;

  }

  angular
    .module('app')
    .factory('Service', Service);

})();

HTML

  <body ng-app="app">
    <div ng-controller="Ctrl1">
      {{test}}
      <pre>{{menu | json}}</pre>
    </div>

    <div ng-controller='Ctrl2'>
      {{test}}
      <pre>{{service.data | json}}</pre>
    </div>

  </body>

在本例中，我们使用数据服务将数据从控制器 1 传递到控制器 2。你可以对你的状态做同样的事情。

你可以看到Working Plunker

【讨论】：

感谢 Paul 的帮助，但我似乎无法让它工作。我看到您在代码中大量使用 (() =>。那是什么引用？当我尝试这个时，它告诉我 Service 是一个未知的服务提供者。
这只是匿名函数的 ES6 语法。通常，将模块声明包装到匿名函数中以将其与页面上的其他代码隔离是一种很好的做法。您可以将此语法替换为传统的(function(){/**/})()。

【解决方案2】：

我一直在使用 Angularjs 的$stateParams 服务来实现这一点。在您为每个状态定义路由的路由器 js 文件中，您需要再定义 1 个参数“params”，如下所示：

.state('state1', {
    url: "/state1",
    templateUrl: 'modules/states/state1.html',
    controller: 'state1Controller',
    controllerAs: 'state1Vm',
    params: { 'stateVals': '' }
})

以同样的方式，为 state2 定义此参数，以及从 state1 导航并返回的位置。

现在在从 state1 导航到 state2 之前，您可以在 state2 中设置要访问的对象，如下所示：

        state1Vm.selectedVals = {
            "key1": state1Vm.content,
            "key2": state1Vm.userInputs
        }

        $state.go('state2', { stateVals: state1Vm.selectedVals });

到达 state2 后，您可以在 state2 的控制器中获取此对象，如下所示：

        state2Vm.selectedVals = {
            "key1": $stateParams.stateVals.key1,
            "key2": $stateParams.stateVals.key2
        };

请注意，您需要在两个控制器中注入$stateParams。

【讨论】：