【问题标题】:Angularjs : view not refreshing after second and more visit of the pageAngularjs:第二次和更多次访问页面后视图不刷新
【发布时间】:2015-10-20 11:51:04
【问题描述】:

我是 angularjs 和 coffeescript 的新手。我在刷新视图时遇到了一个问题。

这是场景:

我有两种类型的页面:

  1. 列出的混合车辆列表。在此页面上,我有“添加到四轮车”和“添加到双轮车”选项。
  2. 第二页包含两个选项卡 1. Twowheeler 2. Fourwheeler

现在首先登录应用程序后,我首先访问第 1 页并选择一辆车添加到fourwheeler,然后转到第2 页并选择fourwheeler 选项卡我发现最近添加的车辆但现在如果我再次转到第1 页-> 选择车辆fourwheeler 并检查第 2 页的fourwheeler 选项卡,然后我没有找到该项目。

当我在控制台中签入时,我发现 API 返回的数据中有新项目,但在视图中丢失了。所以我的结论是,观点并不令人耳目一新。那么每次访问此页面时如何刷新视图?

我想我必须把 $scope.$apply().但是我不知道我应该在哪里使用这个?

代码:

状态文件:

angular.module('states.vehicles', [])
  .config ($stateProvider) ->
    $stateProvider
      .state "app.vehicles",
        url:         "/vehicles/:itemType"
        views: {
          app: {
            controller:  'VehiclesCtrl'
            templateUrl: "templates/vehicles/vehicles.jade"
          }
        }
        abstract:            true
        data:
          isRoot:            true
          showBannerAd:      true
          tabs:
            twowheeler:
              name: 'Twowheeler'
              direction: 'app.vehicles.items({itemType: "twowheeler"})'
              id: 'twowheeler'
              icon: 'icon-twowheeler'
            fourwheeler:
              name: 'Fourwheeler'
              direction: 'app.vehicles.items({itemType: "fourwheeler"})'
              id: 'fourwheeler'
              icon: 'icon-fourwheeler'

      .state 'app.vehicles.items',
        url:         ''
        views: {
          tabs: {
            templateUrl: 'templates/vehicles/vehicles.items.jade'
            controller:  'vehiclesItemsCtrl'
          }
        }
        resolve:
          items: ($stateParams, Vehicle) ->
            offset = $stateParams.queryOffset || 0
            Vehicle.query
              type:   $stateParams.itemType
              count:  10
              offset: offset
        data:
          isTab: true
          loadingTransition: true

控制器文件:

class VehiclesItemsCtrl extends BaseCtrl
  @register 'VehiclesItemsCtrl'

  @inject '$scope', '$state', '$stateParams', 'Vehicle'

  initialize: ->
    @$scope.itemType = @$stateParams.itemType
    @$scope.items    = []
    @$scope.query    = @_vehicleQuery

  # Private

  _vehicleQuery: =>
    @$stateParams.queryOffset = @$scope.items.length
    @$state.current.resolve.items(@$stateParams, @Vehicle)

查看文件:

ion-view(title='Vehicles')
  ion-content.v-offset-nav
    section(ng-switch='itemType')
      div(ng-switch-when='twowheeler')
        section(ng-repeat="twowheeler in items", ui-sref='app.twowheeler({twowheelerId: twowheeler.twowheeler_id})')
          a.row.list-item.list-colors
            h3 {{twowheeler.name}}
      div(ng-switch-when='fourwheeler')
        section(ng-repeat="fourwheeler in items", ui-sref='app.fourwheeler({fourwheelerId: fourwheeler.fourwheeler_id})')
          a.row.list-item.list-colors
            h3 {{fourwheeler.name}}
      nfinite-scroll(items='items', query='query')

请让我知道我需要改变什么?

【问题讨论】:

  • 使用 angular 2 并忘记 $scope.$apply()

标签: angularjs coffeescript angular-ui-router angularjs-ng-repeat


【解决方案1】:
ion-view(cache-view="false", title='Vehicles')

我在 ion-view 标签中添加了 cache-view="false" ,它可以按我的意愿完美运行。

【讨论】:

    猜你喜欢
    • 2012-10-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-11-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多