在状态之间传递对象

Passing an object between states

本文关键字:对象 之间 状态      更新时间:2024-02-03

我一直在尝试使用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>

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

例如:

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

我一直在使用Angularjs的$stateParams服务来实现这一点。在你的路由器js文件中,你定义了每个状态的路由,你需要再定义一个参数"params",如下所示:

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

同样,也可以为状态2定义这个参数,从状态1导航到状态2。

现在,在从状态1导航到状态2之前,您可以将要在状态2中访问的对象设置如下:

        state1Vm.selectedVals = {
            "key1": state1Vm.content,
            "key2": state1Vm.userInputs
        }
        $state.go('state2', { stateVals: state1Vm.selectedVals });

在到达状态2时,您可以在状态2的控制器中获得此对象,如下所示:

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

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