Question

我无法在路由后获取视图上的数据，而控制台上的数据可用。此外，如果视图未更改，则数据可见。如果我在视图上调用服务，我也可以获取数据。

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>

控制台中的数据：

Answer 1

这个想法是使用路由器来使用视图/控制器并添加参数。这是一个plunker，它说明了这些概念： 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（app）：

<!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>

MARKUP（主要）：

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

MARKUP（项目）：

<h4>Items</h4>
<ul>
  <li ng-repeat="item in items">{{item}}</li>
</ul>
<div><a href="#/home">Back</a></div>

Answer 2

总是首选每个视图都有一个单独的控制器，我会在这里推荐相同的。此外，在检查其他任何内容之前，调试代码并检查调试器是否在加载视图并且数据绑定到范围变量时受到影响。如果一切正常，请尝试使用$ scope.apply（）来刷新视图。

＆＃34; viewPage＆＃34;功能呢？它是否重定向到新视图？尝试仅使用一个视图（可以合并单个视图中的内容）和控制器，看看它是否有效，而不是绑定到同一个控制器的两个视图。

路由后，View上的数据不呈现

2 个答案: