Question

我正在开发一个简单的购物车跟踪应用程序，以扩展我对ui-router的了解。我有八种不同的可能状态，每个州都有自己的控制器。这是我的app.config文件，您可以在其中查看状态定义：

module.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state("empty", { templateUrl: "app/templates/empty.html", controller: 'emptyController', controllerAs:'vm' })
        .state("initial", { templateUrl: "app/templates/initial.html", controller: 'initialController', controllerAs: 'vm' })
        .state("shopping", { templateUrl: "app/templates/shopping.html", controller: 'shoppingController', controllerAs: 'vm' })
        .state("shipping", { templateUrl: "app/templates/shipping.html", controller: 'shippingController', controllerAs: 'vm' })
        .state("billing", { templateUrl: "app/templates/billing.html", controller: 'billingController', controllerAs: 'vm' })
        .state("review", { templateUrl: "app/templates/review.html", controller: 'reviewController', controllerAs: 'vm' })
        .state("confirmation", { templateUrl: "app/templates/confirmation.html", controller: 'confirmationController', controllerAs: 'vm' })
        .state("error", { templateUrl: "app/templates/error.html", controller: 'errorController', controllerAs: 'vm' })
    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise("/");
})

我正在尝试使用名为cart的对象来跟踪'cart'，该对象在工厂中定义：

function cart() {
    var factory = {};

    factory.model = {};

    return factory;
}

在我的导航栏上，我有ui-sref来改变状态：

<li ui-sref-active="active"><a ui-sref="empty">Empty</a></li>
<li ui-sref-active="active"><a ui-sref="initial">Initial</a></li>
<li ui-sref-active="active"><a ui-sref="shipping">Shipping</a></li>
<li ui-sref-active="active"><a ui-sref="billing">Billing</a></li>
<li ui-sref-active="active"><a ui-sref="review">Review</a></li>
<li ui-sref-active="active"><a ui-sref="confirmation">Confirmation</a></li>
<li ui-sref-active="active"><a ui-sref="error">Error</a></li>
<li ui-sref-active="active"><a data-toggle="modal" data-target="#login-modal">Log in</a></li>

每当我改变状态时，我都需要将整个cart.model转移到新状态。我怎样才能做到这一点？我的控制器每个都是这样的：

(function () {
    "use strict";

    angular.module('ShoppingCart')
        .controller('emptyController', ['cart', emptyController]);

    function emptyController(cart) {
        var vm = this;
        vm.model = cart.model;
    };
}());

我正试图获得购物车的模型，但我不确定如何在状态变化时更新它。

Answer 1

听起来你有正确的想法使用工厂来保持模型。由于.factory和.service是angularjs中的单件，所以你不必担心“传递”购物车模型。基本上，无论何时进入状态，都会创建一个控制器实例，将实体注入工厂。当您更改状态时，将实例化另一个控制器，并注入SAME购物车工厂实例，这意味着您应该可以访问与之前状态相同的cart.model。

Answer 2

如果要将数据从一个状态移动到另一个状态，可以执行以下操作：

$state.go('toStateName', {id1 : 'dataToPass'}); //using javascript
<a ui-sref="toStateName({id1 : 'dataToPass'})">To New State</a>

并且在'toStateName'的定义中，您可以使用$ stateParams服务访问这些参数。

$stateProvider.state('toStateName', {
url: '/tostate',
params: {id1 : {}},
templateUrl: 'templates/send-to.html',
controller: 'SendToCtrl'
})

我希望这样做。

有关更多信息，请查看以下链接：

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

Answer 3

我相信我明白了。我错误的是在我的html页面中将其称为cart.model.whatever。通过切换到vm.model.whatever并将其他所有内容保持不变，它就开始工作了。

如何在角度ui-router状态之间传递数据？

3 个答案: