Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]AngularJS ui-router problem
Forum PHP.pl > Forum > Przedszkole
kamilo818
Próbuje napisać stronę w oparciu o AngularJS

Po wejsciu na podstrone www.shop.pl#/shop podstrona shop wyświetla się poprawnie.
Na tej podstronie mam linki do kategorii np buty koszule.
Po kliknieciu w buty www.shop.pl#/shop/buty nastepuje filtrowanie danych i wyswietlane sa dane z kategorii buty.

Moj problem polega na tym że po bezpośrednim wejsciu na www.shop.pl#/shop/buty wyswietla się zawartość bez filtracji po 'buty'

Chciałbym żeby po wejsci na ten link parametr 'buty' został przekazany do funkcji która filtruje, ale nie moge dojść jak to zrobić.

kod wygląda tak:
main.js
  1. var myShopApp = angular.module('myShopApp' , ['ui.router']);
  2.  
  3. myShopApp.config(function($stateProvider, $urlRouterProvider) {
  4. $stateProvider
  5. .state('shop', {
  6. url: '/shop',
  7. templateUrl: 'pages/shop.php'
  8. })
  9. .state('shop.item',{
  10. url: '/:item',
  11. templateUrl: 'pages/shop.php',
  12. controller: function($scope, $stateParams) {
  13. $scope.item = $stateParams.item;
  14. }
  15.  
  16. })
  17. .state('promocje', {
  18. url: '/promocje',
  19. templateUrl: 'pages/promocje.php'
  20. })
  21.  
  22. myShopApp.controller("menuCtrl", function($scope) {
  23.  
  24. $scope.currentCategory = null;
  25. function setCurrentCategory(pos){
  26. $scope.currentCategory = pos;
  27.  
  28. }
  29.  
  30. $scope.setCurrentCategory = setCurrentCategory;
  31.  
  32. })
  33.  
  34. })


shop.php

  1. <categories ng-controller="menuCtrl">
  2. <category>
  3. <div ng-click="setCurrentCategory(null)">Wszystkie produkty</div>
  4.  
  5. <li ng-repeat="pos in categories" >
  6. <a ng-click="setCurrentCategory(pos)" ng-href="#/shop/{{pos.item}}" ng-class="{'active':isCurrentCategory(pos)}">{{pos.item}}</a>
  7. </li>
  8.  
  9. </category>
  10.  
  11. {{currentCategory.item}}
  12.  
  13. <box >
  14. <div ng-repeat="pos in products | filter:currentCategory.item">
  15. {{pos.name}} {{pos.opis}}
  16. </div>
  17. </box>
  18. </categories>


Mam nadzieje że jasno wyjasniłem o co mi chodzi smile.gif

wydawało mi się że dzięki temu
  1.  
  2. controller: function($scope, $stateParams) {
  3. $scope.item = $stateParams.item;
  4. }

będę miał odczytany parametr ale to chyba nie działa,albo nie potrafie sie do niego dostac.

Z góry dzięki za pomoc
markuz
A zamiast /:item nie powinno być /shop/:item?
Zrób console.log($stateParams); i powiedz Co wyświetla.

I filtrujesz według currentCategory.item a parametr z URL chcesz przekazać do item.
kamilo818
podobno to to samo smile.gif
Ale próbowałem i tak i tak
markuz
Co to samo? currentCategory.item to to samo co item? Czy /shop/:item to to samo co :item? Według mnie nic z powyższych nie jest takie same. Co zwróciło console.log?

PS. Polecam Ci najpierw przerobić tutorial - https://docs.angularjs.org/tutorial/step_00 smile.gif
kamilo818
console.log($stateParams) nic nie wyświetla

/shop/:item to to samo co :item - odpowiedziałem Ci przed tym jak post edytowałeś.
to to samo wg:
https://egghead.io/lessons/angularjs-introduction-ui-router 2:20 min

markuz
A zamiast $stateParams nie powinno być $routeParams? Ten tutorial dotyczy wersji 1.2.6 - teraz najnowsza stabilną jest 1.2.23 a ostatnią 1.3. Ty z ktorej wersji angulara korzystasz?
kamilo818
1.2.24
markuz
Zmieniłeś $stateParams na $routeParams? Strasznie jesteś oporny na poprawianie kodu wink.gif
kamilo818
Poprawiłem. nic to nie dało.

Dodatkowo chciałem sprawdzić czy wogóle wyłapuje parametr. Zmienielem na

  1. .state('shop.item',{
  2. url: '/:item',
  3. templateUrl: 'pages/test.php',
  4. controller: function($scope, $stateParams) {
  5. $scope.item2 = $stateParams.item;
  6.  
  7. }
  8.  
  9. })


test.php
  1. {{item2}}


Wogole nie przechodzi to test.php sad.gif
markuz
Od kiedy to angular używa plików php? To jest przecież javascript..
Poprawiłeś na $routeParams i zrobiłeś też console.log?
Zrób console.log($routeParams) i powiedz Co wyświetla.
kamilo818
Tak zrobiłem i nic nie wyświetla

  1. .state('shop.item',{
  2. url: '/:item',
  3. templateUrl: 'pages/test.html',
  4. controller: function($scope, $routeParams) {
  5. $scope.item2 = $routeParams.item;
  6. console.log($routeParams);
  7. }
  8.  
  9. })
markuz
Nic nie wyświetla - a co to oznacza? Że w ogóle nie wykonuje tego kodu. Pokazało by undefined albo null, ale jak nic nie wyświetla tzn. że masz problem z routerem. Na jakiej przeglądarce to debugujesz?

Jeszcze raz Ci podpowiem - przerób oficjalny tutorial Angluara - https://docs.angularjs.org/tutorial i będziesz wiedział o co chodzi.
kamilo818
Jak bym nie miał problemu to bym nie pisał.

Chrome
markuz
Żeby Ci dobrze działał routing musisz:
1. Do bower.json dodać jako "dependencies" "angular-route": "~1.2.x"
2. Wykonać npm install
3. Do module aplikacji dodać 'ngRoute'
4. I w całkowicie inny sposób definiować routery, zobacz: https://docs.angularjs.org/tutorial/step_07 np.

[JAVASCRIPT] pobierz, plaintext
  1. phonecatApp.config(['$routeProvider',
  2. function($routeProvider) {
  3. $routeProvider.
  4. when('/phones', {
  5. templateUrl: 'partials/phone-list.html',
  6. controller: 'PhoneListCtrl'
  7. }).
  8. when('/phones/:phoneId', {
  9. templateUrl: 'partials/phone-detail.html',
  10. controller: 'PhoneDetailCtrl'
  11. }).
  12. otherwise({
  13. redirectTo: '/phones'
  14. });
  15. }]);
[JAVASCRIPT] pobierz, plaintext


Twoim głównym problemem jest źródło wiedzy smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.