Данные не отображаются на View после маршрутизации

0

Я не могу получить данные в представлении после маршрутизации, пока тот же доступен на консоли. Более того, если вид не изменяется, данные видны. Также, если я вызываю службу на просмотр, я могу получить данные.

controller.js:

myStore.controller("Home", function ($scope, StoreService, $log, $window,$location ){
    var onComplete = function (data) {
        $log.info(data);

        $scope.gettempdata = data;
        $log.info($scope.gettempdata);
        $log.info("in complete");
    }
    var onError = function (reason) {
        alert(reason.errorcode);
    }
$scope.GetItemsByCat = function (CatName, loc)
    {
        $log.info("wait for 5 more secs");
        viewPage(loc);
        StoreService.getItemsByCat(CatName).then(onComplete, onError);


    }
});

App.js:

var myStore = angular.module('groceries', ['ngRoute'])
.config(function ($routeProvider) {
    $routeProvider.
  when("/Home", {
            templateUrl: "/Index.html",
            controller: "Home"
        }).
    when("/Items", {
        templateUrl: "Store/Fruits.html",
        controller: "Home"
    }).
 otherwise
    ({
        redirectTo: "/Home"
    })

});

Посмотреть:

<p class="text-info">
        <b>Welcome to our store.
        <br />
            We have the below categories JUST FOR YOU. Please select one to get more details on the items</b>

    </p>


{{gettempdata}}

        <table class="table table-bordered">

            <tr>
                <td>
                    <img src="/img/Fruit.png" height="60" width="60" alt="Fruits" />

                </td>
                <td>
                    <a href="" ng-click="GetItemsByCat('Fruit',window.location.href='/Items')">Fruits</a>
                    <!--<a href="" ng-click="GetItemsByCat('Fruit')">Fruits</a>-->

                </td>
            </tr>
            <tr>
                <td>
                    <img src="/img/Vegetable.png" height="60" width="60" alt="Vegies" /></td>
                <td>
                    <a href="" ng-click="GetItemsByCat('Vegetable')">Vegetables</a>
                </td>

            </tr>

        </table>

Данные в консоли:

Изображение 174551

  • 0
    Оба маршрута имеют одинаковый контроллер.
  • 0
    Здесь есть 3 проблемы: 1) Вам не нужен контроллер «Домой», потому что он не делает ничего, что нужно в представлении «Домой». 2) Не используйте ng-click, просто ссылку на URL. 3) вызовите метод «GetItemsByCat» в вашем контроллере. Если вы отправите PLNKR с некоторым кодом, я могу показать вам, что я имею в виду.
Показать ещё 2 комментария
Теги:
service

2 ответа

0
Лучший ответ

Идея состоит в том, чтобы использовать маршрутизатор для использования представлений/контроллеров и для добавления параметров. Здесь плункер, который иллюстрирует эти понятия: http://plnkr.co/edit/28DCsSQtElcdM86N9hus?p=preview

Автор сценария:

var myStore = angular.module('groceries', ['ngRoute'])
  .config(function ($routeProvider) {
    $routeProvider.when('/home', {templateUrl: 'home.html'})
    .when('/items/:catName', {templateUrl: 'items.html', controller: 'ItemsCtrl'})
    .otherwise({redirectTo: '/home'})
  });

myStore.controller('ItemsCtrl', function ($scope, $routeParams, StoreService) {
  var catName = $routeParams.catName
  var onComplete = function (data) {
    $scope.items = data;
  },
  onError = function (reason) {
    alert(reason.errorcode);
  };
  $scope.GetItemsByCat = function (catName) {
    StoreService.getItemsByCat(catName).then(onComplete, onError);
  };
  $scope.GetItemsByCat(catName);
});

myStore.factory('StoreService', function($q) {
  function getItemsByCat(catName) {
    var deferred = $q.defer();
    setTimeout(function() {

      deferred.resolve([catName + ': item1', catName + ': item2', catName + ': item3']);
    }, 1000);

    return deferred.promise;
  }

  return {
    getItemsByCat: getItemsByCat
  };
});

MARKUP (приложение):

<!DOCTYPE html>
<html ng-app="groceries">
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <ng-view></ng-view>
  </body>
</html>

МАРКУП (основной):

<h2>Welcome to our store.</h2>
<p>We ...</p>
<table class="table table-bordered">
  <tr>
    <td><img src="/img/Fruit.png" height="60" width="60" alt="Fruits" /></td>
    <td><a href="#/items/Fruits">Fruits</a></td>
  </tr>
  <tr>
    <td><img src="/img/Vegetable.png" height="60" width="60" alt="Vegies" /></td>
    <td>
      <a href="#/items/Vegetables">Vegetables</a>
    </td>
  </tr>
</table>

МАРКУП (изделия):

<h4>Items</h4>
<ul>
  <li ng-repeat="item in items">{{item}}</li>
</ul>
<div><a href="#/home">Back</a></div>
Поделиться
  • 0
    Большое спасибо .. Это сработало ...
0

Его всегда предпочитали иметь отдельный контроллер для просмотра, и я бы порекомендовал то же самое здесь. Кроме того, прежде чем проверять что-либо еще, отлаживайте свой код и проверяйте, попадает ли отладчик в момент загрузки вашего представления, и данные привязаны к вашей переменной области видимости. Если все работает нормально, попробуйте использовать $ scope.apply() для обновления вашего представления.

Что делает функция viewPage? Переадресовывает ли он новое представление? Попробуйте использовать только один вид (может объединить содержимое в одном представлении) и контроллер и посмотреть, работает ли он вместо двух представлений, привязанных к одному контроллеру.

Поделиться
  • 0
    Спасибо @Piyush Ханна. я создал отдельные контроллеры для каждого представления. и использовал RouteParams, как упомянуто в ответе выше. ViewPage был создан для маршрутизации.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню