Можно ли передавать параметр из состояния в состояние с помощью 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, к узлу подключен маршрутизатор для выражения:

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 не вернет представление.

В основном я пытаюсь добиться следующего: узел, обслуживающий просмотры клиентов, все представления магазина — магазин/продукт/корзина привязаны к angular app, обслуживаются через Server.js, при нажатии на товар в магазине будет перенаправлено на страницу продукта после resolve информации о продукте от api. Я получаю информацию о продукте, но не вижу его.

Я искал это, но все решения не работали .... может быть, я плохой :-(
Как я могу это сделать?

ОБНОВЛЕНИЕ-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, где он перестает работать, либо я получаю представление ИЛИ я получаю параметры.

Снимок журнала консоли WebStorm

Я пробовал разные способы 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, я получу шаблон в маршруте, 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 выше) NO view.


person Jadeye    schedule 07.08.2016    source источник
comment
у вас есть ошибка ui-sref?   -  person AranS    schedule 07.08.2016
comment
@AranS: проблема ui-sref была исправлена, но теперь она не перенаправляется на просмотр после resolve информации о продукте.   -  person Jadeye    schedule 09.08.2016
comment
@Jadeye - попробуйте a(ui-sref="products({ productSku: product.sku })") вместо a(ui-sref="products({productSku:'{{product.sku}}'})")   -  person Aks1357    schedule 09.08.2016
comment
@ Aks1357, то же самое, и проблема не в этом, а в resolve или любой другой функции на пути.   -  person Jadeye    schedule 10.08.2016
comment
объект определения состояния может иметь свойство params, и мы можем передать любой объект с этим именем параметра в это состояние.   -  person ravshansbox    schedule 02.09.2016


Ответы (4)


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

Store.jade

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

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

Ваш 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

person Adam Spence    schedule 10.08.2016
comment
Магазин state обслуживается (конечно, экспрессом) и если я уберу resolve и заменю ui-sref на обычный a(href='/products/{{product.sku}}'), он действительно выдаст jade template, дело в том, что router/ stateProvider/ stateParams не получит productSku - person Jadeye; 10.08.2016
comment
Итак, у вас есть шаблон в магазине/продукте и загружается ли он при изменении маршрута? Думаю проблема в отсутствии ng-view, точно сказать сложно. UI-Router иногда тихо выходит из строя, что раздражает - person Adam Spence; 11.08.2016
comment
У меня все на месте. Я добавил снимок, чтобы вы могли видеть консоль. Как вы можете видеть, api возвращает продукт, angular говорит, что закончил загрузку шаблона, хотя на самом деле он находится на той же странице, откуда был сделан вызов. Если бы я мог подумать, где возникает проблема, я бы сказал, что ui-sref отправляет параметр от одного state к другому (как я уже упоминал в своем вопросе). он разрешает параметр, затем вызывает экспресс для загрузки представления и не возвращает представление на экран....:-(... возможно, что-то делать с маршрутом в URL-адресе браузера - person Jadeye; 11.08.2016
comment
Вы пытались добавить оболочку ng-view? Мне понадобится plunkr или что-то для правильной отладки - person Adam Spence; 12.08.2016
comment
plunker немного проблематичен, так как у меня есть express, но я постараюсь добавить обновление, чтобы еще больше упростить ситуацию. Я попробовал вашу оболочку ng-view, это не помогло. пожалуйста, прочитайте мое обновление. спасибо - person Jadeye; 12.08.2016
comment
стыдно за плункер, но взгляните на мое последнее редактирование о $promise. - person Adam Spence; 17.08.2016

Это решение, которое я нашел:

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 view...

Спасибо всем, кто пытался...

person Jadeye    schedule 21.08.2016

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

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

Вы не включили зависимость _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);, чтобы увидеть в консоли браузера

person Khubaib Ghouri    schedule 09.09.2016