Можно ли передать параметр из состояния в состояние с угловыми?

Я хочу передать параметр из одного состояния хранилища в информацию о продукте на дисплее в состоянии продукта:

Мое приложение - 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);

Продукт Factory

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

Поскольку я использую MEAN Stack, node имеет маршрутизатор, прикрепленный для выражения:

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.

Теперь проблема в том, что node не вернет представление.

В основном я пытаюсь достичь: Node просмотр клиентских представлений, все виды хранилища - хранилище/товар/корзина прикреплены к angular app через Server.js, при нажатии на продукт магазина перенаправление на страницу продукта после 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(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 из store в представление product и попробуйте resolve передать параметры продукта обратно в product, что там, где он перестает работать, либо я получаю view ИЛИ я получаю params.

Я пробовал разные способы resolve, все они приводят к тому же - просмотр 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)
        }
    }
})

Если я удалю resolve и отправлю a(href='/products/{{product.sku}}') из store.jade, я получу шаблон в маршруте, ошибка chrome console, которую я получаю: `Ошибка: $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 выше) NO view.

Ответ 1

angular не будет загружать нефритовые шаблоны, вам понадобится шаблон html, шаблон jade загружается экспресс. Вы можете попробовать использовать ui-view следующим образом:

Store.jade

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

Что должно сделать angular искать неназванный вид при загрузке маршрута.

Ваш шаблонUrl не выглядит ориентированным на файлы, возможно, вам не хватает расширения файла?

Убедитесь, что вы возвращаете $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

Ответ 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 просматривает нагрузки...

Thanx всем, кто пытался...

Ответ 3

Вы можете передать его как $state.data в свой контроллер.

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

Ответ 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); для просмотра в консоли своего браузера.