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

Question

我希望将一个参数从一个商店状态传递到产品状态中的显示产品信息:

我的应用 - 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，所以节点有连接到 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

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

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

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

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

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查看它停止工作的地方，要么我得到 View ，要么我得到参数。

我尝试了不同的方式 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并发送a(href='/products/{{product.sku}}')来自 store.jade我在 route 得到模板，chrome console我得到的错误是`Error: $injector:unpr Unknown Provider _product <- productCtrl

product.ctr.js

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

如果我发送a(ui-sref="products({productSku: product.sku })")与 resolve我得到产品参数(在上面的 WebStorem 快照中显示)没有 View 。

Answer 1

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

Store.jade

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

这应该在加载路线时对未命名 View 进行 Angular 查找。

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

确保在解析中返回一个 $promise，因为 ui-router 会在渲染 View 之前等待它们被解析。

我建议在路由中也使用相应的配置命名 View :

.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