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，因此节点已连接路由器以表示：

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＆amp;终于从API获得了一个对象。

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

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

我查了一下，但所有解决方案都没有用......也许是我的坏事:-（
我怎么能这样做呢？

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

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

app.js - 存储路线

store

server.js（express）

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

store.js

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

store.ctr.js

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

加载得很好！

但是，当我尝试将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的不同方式，它们都是相同的 - 查看OR产品参数。

app.js - 产品路线

resolve

如果我从.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错误：$ injector：unpr未知提供商_product＆lt; - productCtrl

product.ctr.js

chrome console

如果我发送.controller('productCtrl', ['_product', function ($rootScope, $http, $stateParams, productFactory, storeFactory, _product) { a(ui-sref="products({productSku: product.sku })")我得到产品参数（在上面的WebStorem快照中显示）没有视图。

Answer 1

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

<强> Store.jade

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

在加载路线时，应该对未命名的视图进行角度查找。

你的templateUrl看起来不是指向文件，也许你错过了文件扩展名？

确保在ui-router等待之前返回$promise，直到它们在呈现视图之前被解析为止。

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

.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

您尚未在_products中包含storeCtrl的依赖关系。当您拨打该服务时，您会收到错误。

正确的代码是：

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);在浏览器控制台中查看

是否有可能通过angularJs将param从州传递到州？

4 个答案: