javascript - 内容不会在路线更改时更新

标签 javascript css angularjs html url-routing

当我改变路线时,从说 /set/1/set/2 , 然后它仍然显示来自 /set/1 的信息在我手动刷新页面之前,我尝试添加 $route.refreshng-click这些页面的链接,但这也不起作用。有什么想法吗?

下面是路由代码,这个工作正常,所有路由都是通过链接完成的,只是<a> href 到路由的标签。

angular.module('magicApp', ['ngRoute']).config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
        templateUrl: 'pages/home.html'
    }).when('/set', {
        redirectTo: '/sets'
    }).when('/set/:setID', {
        controller: 'SetInformationController',
        templateUrl: 'pages/set.html'
    }).when('/card', {
        redirectTo: '/cards'
    }).when('/card/:cardID', {
        controller: 'CardInformationController',
        templateUrl: 'pages/card.html'
    }).when('/sets', {
        controller: 'SetListController',
        templateUrl: 'pages/sets.html'
    }).when('/cards', {
        controller: 'CardListController',
        templateUrl: 'pages/cards.html'
    }).when('/search/:searchterm', {
        controller: 'SearchController',
        templateUrl: 'pages/search.html'
    }).otherwise({
        redirectTo: '/'
    });
}]);

下面是 SetListController 的代码,它使用 routeParams 从服务中获取正确的信息,当我转到 /set/1 时,它起作用了。然后它返回正确的信息,如果我然后返回然后转到 /set/2它仍然显示第 1 组的信息,直到我刷新页面。

.controller('SetInformationController', function($scope, $routeParams, $route, SetInformationService, CardSetInformationService) {
$scope.set = [];
$scope.cards = [];

function init() {
    SetInformationService.async($routeParams.setID).then(function(d) {
        $scope.set = d;
    });
    CardSetInformationService.async($routeParams.setID).then(function(d) {
        $scope.cards = d;
    })
}

init();
})

HTML 本身没有引用 Controller 或类似的东西,只有作用域中的对象,即 setcards .

最佳答案

我想通了!问题实际上不是我的服务的路由问题,这是之前的服务:

.factory('SetInformationService', function($http) {
  var promise;
  var SetInformationService = {
    async: function(id) {
      if ( !promise ) {
          // $http returns a promise, which has a then function, which also returns a promise
          promise = $http.get('http://api.mtgdb.info/sets/' + id).then(function (response) {
           // The then function here is an opportunity to modify the response
           console.log("Set Information");
           console.log(response);
           // The return value gets picked up by the then in the controller.
           return response.data;
           });
      }
      // Return the promise to the controller
      return promise;
    }
  };
  return SetInformationService;
})

它应该在的地方:

.factory('SetInformationService', function($http) {
  var promise;
  var SetInformationService = {
    async: function(id) {
      // $http returns a promise, which has a then function, which also returns a promise
      promise = $http.get('http://api.mtgdb.info/sets/' + id).then(function (response) {
        // The then function here is an opportunity to modify the response
        console.log("Set Information");
        console.log(response);
        // The return value gets picked up by the then in the controller.
        return response.data;
      });
      // Return the promise to the controller
      return promise;
    }
  };
  return SetInformationService;
})

关于javascript - 内容不会在路线更改时更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23457950/

相关文章:

html - 位置为 : absolute pushing down content 的 CSS3 布局

javascript - 我在一个 div 中有 2 个并排的元素,隐藏一个会使另一个扩展以填充它们所在的 div 的空间吗?

javascript - 如何在 Angular 的所有模块中包含配置部分?

javascript - 使用 Angular ng-repeat 创建嵌套列表

javascript - 如何知道何时收到所有 block

html - 如何使用在 WP 8.1 上运行的 IE 11 断词?

javascript - 如何比较 JavaScript 中的变量值?

php - 无法使用 PHP MySQL 更新数据库,其中数据来自 AngularJS1.2 服务

javascript - 打开可折叠时将网站的其余部分向下移动

javascript - 将选定的下拉菜单值传递到第二个函数