是否可以使用 angularJs 将参数从一个状态传递到另一个状态？

Question

我希望将一个商店状态的参数传递给 products-state 中的显示产品信息：

我的应用 - storeApp

.config(['$stateProvider', function($stateProvider) {
$stateProvider
    .state('store', {
        url: '/store',
        templateUrl: 'store/store',
        controller: 'storeCtrl'
    })
    .state('products', {
        url: '/products/:productSku',
        templateUrl: 'store/product',
        controller: 'productCtrl',
        resolve: {
                productResource: 'productFactory',
                _product: function(productResource, $stateParams){
                return productResource.getProduct($stateParams.productSku);
                    }
                }

Store.jade

a(href='/products/{{product.sku}}')

产品控制器

.controller("productCtrl", function ($rootScope, $http, $stateParams, productFactory, storeFactory) {
//.controller('productCtrl', ['_product', function ($scope, $rootScope, storeFactory, _product) {

console.log($stateParams.productSku);

产品工厂

function getProduct(sku) {
    return $http.get('http://localhost:3000/api/products/' + sku );
}

由于我使用的是 MEAN Stack，因此 node 已将路由器连接到 express：

Server.js

const storeController = require('./controllers/store');
server.get('/store/product', passportConfig.isAuthenticated, storeController.getProductPage);

Store.js

exports.getProductPage = (req, res) => {
    res.render('store/product', {
        title: 'PP',
        angularApp: 'storeApp'
    })
}

我尝试返回_product，但得到Unknown provider: _productProvider <- _product <- productCtrl

我尝试在store.jade 中使用ui-sref - a(ui-sref="products({productSku:'{{product.sku}}'})") 将参数从store_State 发送到products_State 并最终从API 中返回一个对象。

现在的问题是节点不会返回视图。

基本上我想要实现的是： 服务客户端视图的节点，所有商店视图 - 商店/产品/购物车都附加到通过Server.js 服务的angular app，单击商店产品将在resolve 来自api 的产品信息之后重定向到产品页面。 我正在获取产品信息，但没有获取产品视图。

我查了一下，但所有解决方案都不起作用....也许是我的错 :-(
我该怎么办？

UPDATE-1：这是发生了什么：

更新-2： 当我将控件传递给angular 时，我有express 路由菜单，angular stateProvider 路由/将views 连接到controllers。 加载的主视图是store 本身：

app.js - 存储路径

$stateProvider
    .state('store', {
            url: '/store',
            templateUrl: 'store/store',
            controller: 'storeCtrl'
    })

server.js（快递）

server.get('/store', passportConfig.isAuthenticated, storeController.getStorePage);

store.js

exports.getStorePage = (req, res) => {
    res.render('store/store', {
        title: 'S--tore',
        angularApp: 'storeApp'
    });
}

store.ctr.js

angular.module("storeApp")
.controller("storeCtrl", function($rootScope, $http, storeFactory) {

    var products;

    storeFactory.getProducts().then(function(_products) {
        products = _products.data;
        $rootScope.products = products;
    });

加载就好了！

但是当我尝试将参数 productSku 从 store 视图发送到 product 视图并让 resolve 将产品参数发送回 product 视图时它停止工作，要么我得到查看或我得到参数。

我尝试了resolve 的不同方式，它们的结果都相同 - 查看或产品参数。

app.js - 产品路线

.state('products', {
    url: '/products/:productSku',
    templateUrl: 'store/product',
    controller: 'productCtrl',
    resolve: {
        _product: function ($stateParams, $state, $http) {
        return $http.get('http://localhost:3000/api/products/' + $stateParams.productSku );
        //return productResource.getProduct($stateParams.productSku)
        }
    }
})

如果我删除resolve 并从store.jade 发送a(href='/products/{{product.sku}}')，我会在路由中得到模板，chrome console 我得到的错误是`Error: $injector:unpr Unknown Provider _product

product.ctr.js

.controller('productCtrl', ['_product', function ($rootScope, $http, $stateParams, productFactory, storeFactory, _product) {

如果我发送 a(ui-sref="products({productSku: product.sku })") 和 resolve 我会得到产品参数（如上面的 WebStorem 快照所示）没有视图。

Answer 1

angular不会加载jade模板，你需要一个html模板，jade模板是通过express加载的。您可能想尝试像这样使用 ui-view：

Store.jade

div(ui-view)
  a(href='/products/{{product.sku}}')

在加载路线时应该使角度寻找未命名的视图。

您的 templateUrl 看起来并不指向文件，也许您缺少文件扩展名？

确保在解析中返回 $promise，因为 ui-router 会等到它们被解析后再渲染视图。

我也建议在路由中使用相应配置的命名视图：

.state('store', {
    url: '/store',
    views: {
        '@': {
            templateUrl: 'store/store.html',
            controller: 'storeCtrl'
        }
    }
})
.state('products', {
    url: '/products/:productSku',
    templateUrl: 'store/product',
    controller: 'productCtrl',
    resolve: {
        _product: function ($stateParams, $state, $http) {
            return $http.get('http://localhost:3000/api/products/' + $stateParams.productSku ).$promise;

    }
}

})

在此处查看文档：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Answer 2

这是我找到的解决方案：

store.jade

a(href='/products/{{product.sku}}' ng-click='sku(product.sku)')

stroe.ctr.js

$rootScope.sku = function(value){
        storeFactory.singleProduct.productSku = value;
        storeFactory.singleProduct.saveSku();
}

store.fac.js

var singleProduct = {
    productSku : '',
    saveSku: function() {
        sessionStorage.productSku = angular.toJson(singleProduct.productSku);
    },
    getSku: function() {
        singleProduct.productSku = angular.fromJson(sessionStorage.productSku);
        return singleProduct.productSku;
    }
}

product.ctr.js

var sp = storeFactory.singleProduct.getSku();

productFactory.getProduct(sp).then(function (product) {
    $rootScope.product = product.data;
});

product.fac.js

function getProduct(sku) {
        return $http.get('http://localhost:3000/api/products/' + sku );
}

基本上我将 productSku 存储到 sessionStorage 并在 product.jade 视图加载时从那里取回...

感谢所有尝试过的人...

Answer 3

您可以在控制器中将其作为$state.data 传递。

toState = $state.get("some-state");
toState.data.foo = $scope.foo;
$state.go(toState);

Answer 4

您没有在storeCtrl 中包含_products 的依赖关系。当您调用该服务时，您会收到错误消息。

正确的代码是：

angular.module("storeApp")
 .controller("storeCtrl", function($rootScope, $http, storeFactory, _products) {

   var products;

   storeFactory.getProducts().then(function(_products) {
     products = _products.data;
     $rootScope.products = products;
   });

您可以使用console.log("something here" + _products.data); 在浏览器控制台中查看