javascript – 有可能使用angularJs將狀態從狀態傳遞到狀態嗎？

我希望通過一個商店狀態的引數到產品狀態的顯示產品資訊：

我的應用 – 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,但是我收到了未知的提供者：_productProvider<- _product<- productCtrl 我嘗試在store.jade中使用ui-sref – a(ui-sref =“products({productSku：'{{product.sku}}’})”)將param從store_State傳送到products_State&終於從API得到了一個物件. 現在的問題是節點不會返回檢視. 基本上我想要實現的是：

節點服務客戶端檢視,所有商店檢視 – 商店/產品/購物車附加到通過Server.js提供的角度應用程式,點選商店產品將從api解析產品資訊後重定向到產品頁面.

我得到產品資訊,但沒有獲得產品檢視.

我看了看,但所有的解決方案都沒有工作….也許我的壞:-(

我該怎麼辦？

更新1：這是發生了什麼：

更新2：

當我將控制元件傳遞給角度時,我有快速路由選單,並且角狀態提供路由/連線檢視到控制器.

主要觀點是負載是商店本身：

app.js – 商店路線

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

server.js(express)

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;
});

那載入很好！

但是當我嘗試將param productSku從商店檢視傳送到產品檢視,並將解決方案發送到產品檢視,停止工作時,它是我得到的檢視,或者我得到引數.

我嘗試了不同的解決方法,它們都是相同的 – 檢視OR產品引數.

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)
}
}
})

如果我從store.jade中刪除解決方案併發送一個(href =’/ products / {{product.sku}}’),我得到路由中的模板,我得到的chrome控制檯錯誤是“錯誤：$inject：unpr未知Provider _product<- productCtrl product.ctr.js

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

如果我傳送(ui-sref =“products({productSku：product.sku})”),我將得到產品引數(在上面的WebStorem快照中顯示)NO檢視.

角度不會載入玉模板,您將需要一個html模板,玉模板由快遞載入.你可能想嘗試使用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;

}
}

})

請參閱這裡的文件： ofollow,noindex" target="_blank">https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views