Javascript 在状态之间传递对象_Javascript_Angularjs_Object

Javascript 在状态之间传递对象
javascript angularjs object
Javascript 在状态之间传递对象,javascript,angularjs,object,Javascript,Angularjs,Object,我一直在尝试使用angular将模板page1中单击的对象传递给另一个名为page2的模板。我可以使用ng click访问此对象，但无法将其传递到其他模板。我已经读过使用state.go（）可能有用的文章，但我还没有弄明白这一点。如果state.go（）不是一个好主意，我应该用什么来代替 angular.module（'操场'，[]） .config（函数（$stateProvider，$urlRouterProvider）{ “严格使用”； /*设置应用程序不同部分的状态*/ $stateP
我一直在尝试使用angular将模板page1中单击的对象传递给另一个名为page2的模板。我可以使用ng click访问此对象，但无法将其传递到其他模板。我已经读过使用state.go（）可能有用的文章，但我还没有弄明白这一点。如果state.go（）不是一个好主意，我应该用什么来代替
angular.module（'操场'，[]）
.config（函数（$stateProvider，$urlRouterProvider）{
“严格使用”；
/*设置应用程序不同部分的状态*/
$stateProvider
.state（'page1'{
名称：“第1页”，
url:“/page1”，
templateUrl:'page1.html'，
控制器：“MainCtrl”
})
.州（第2页）{
名称：“第2页”，
url:“/page2”，
templateUrl:'page2.html'，
控制器：“MainCtrl”
});
$urlRouterProvider。否则（'/page1'）；
})
.controller（'MainCtrl'，函数（$scope，$state）{
“严格使用”；
$scope.add=函数（项，$stateParams）{
如果（$scope.ordered.indexOf（item）>-1）{
//现在没有
}否则{
$scope.ordered.push（项目）；
}
log（$scope.ordered）；
};
$scope.ordered=[]
$scope.menu=[{
标题：“披萨”，
输入：“主菜”，
最喜欢的：真的，
价格:10
}, {
标题:"玉米卷",，
输入：“主菜”，
最喜欢的：假，
价格:5元
}, {
标题：“洋葱圈”，
键入：“应用程序”，
最喜欢的：假，
价格:2
}, {
标题:"冰激凌",，
类型：“甜点”，
最喜欢的：假，
价格:11
}, {
标题：“Mac n奶酪”，
键入：“应用程序”，
最喜欢的：假，
价格:7
}, {
标题：“沙拉”，
类型：'沙拉'，
最喜欢的：真的，
价格:4
}];
$scope.ordered=[]；
});

{{item.title}
{{item.type}
添加
{{item.title}
{{item.type}
去除
当您想要共享数据时，您可以使用angular service，因为所有angular service都是单态的，所以您可以轻松地在控制器和状态之间共享数据
例如：
控制器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>


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

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

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

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

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

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

{{service.data | json}

在本例中，我们使用数据服务将数据从控制器1传递到控制器2。你可以对你的州做同样的事情
您可以看到
当您想要共享数据时，您可以使用angular service，因为所有angular services都是单例，因此您可以轻松地在控制器和状态之间共享数据
例如：
控制器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>


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

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

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

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

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

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

{{service.data | json}

在本例中，我们使用数据服务将数据从控制器1传递到控制器2。你可以对你的州做同样的事情
您可以看到，我一直在使用Angularjs的$stateParams
服务来实现这一点。在路由器js文件中，为每个状态定义路由，需要定义1个参数“params”，如下所示：
        state2Vm.selectedVals = {
            "key1": $stateParams.stateVals.key1,
            "key2": $stateParams.stateVals.key2
        };

同样，为state2定义此参数，以及从state1导航到后面的位置
现在，在从state1导航到state2之前，您可以在state2中设置要访问的对象，如下所示：
        state2Vm.selectedVals = {
            "key1": $stateParams.stateVals.key1,
            "key2": $stateParams.stateVals.key2
        };

到达state2时，您可以在state2的控制器中获得此对象，如下所示：
        state2Vm.selectedVals = {
            "key1": $stateParams.stateVals.key1,
            "key2": $stateParams.stateVals.key2
        };

请注意，您需要在两个控制器中注入$stateParams
。
我一直在使用Angularjs的$stateParams
服务来实现这一点。在路由器js文件中，为每个状态定义路由，需要定义1个参数“params”，如下所示：
        state2Vm.selectedVals = {
            "key1": $stateParams.stateVals.key1,
            "key2": $stateParams.stateVals.key2
        };

同样，为state2定义此参数，以及从state1导航到后面的位置
现在，在从state1导航到state2之前，您可以在state2中设置要访问的对象，如下所示：
        state2Vm.selectedVals = {
            "key1": $stateParams.stateVals.key1,
            "key2": $stateParams.stateVals.key2
        };

到达state2时，您可以在state2的控制器中获得此对象，如下所示：
        state2Vm.selectedVals = {
            "key1": $stateParams.stateVals.key1,
            "key2": $stateParams.stateVals.key2
        };

请注意，您需要在两个控制器中注入$stateParams
。
谢谢您的帮助，Paul，但我似乎无法让它工作。我看到你在用（）=>您的代码中有很多。引用的是什么？当我尝试此操作时，它告诉我服务是未知的服务提供商。这只是匿名函数的ES6语法。一般来说，将模块声明包装到匿名函数中是一个很好的做法，以便将其与页面上的其他代码隔离。您可以将此语法替换为e传统的（function（）{/***}）（
。谢谢你的帮助，Paul，但我似乎无法让它工作。我看到你正在使用（）=>您的代码中有很多。引用的是什么？当我尝试此操作时，它告诉我服务是未知的服务提供商。这只是匿名函数的ES6语法。一般来说，将模块声明包装到匿名函数中是一个很好的做法，以便将其与页面上的其他代码隔离。您可以将此语法替换为e传统的（函数（）{/**/}）（
）。