Question

我一直在尝试使用angular将在模板page1中单击的对象传递给另一个名为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>

Answer 1

当您想要共享数据时，可以使用角度服务，因为所有角度服务都是单例，因此您可以轻松地在控制器和状态之间共享数据。

例如：

控制器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

Answer 2

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

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

同样，为state2定义这个参数，以及你想从state1和backit导航的地方。

现在，在从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。

在状态之间传递对象

2 个答案: