Question

我有一个使用侧边栏的Ionic应用程序。在这个侧边栏中，有一个功能可以刷新数据，然后返回到服务器并返回一个新的JSON对象，我将其保存到本地存储。

我面临的问题是，当你打开侧面菜单并点击“刷新我的数据”菜单项时，数据确实会被返回并成功保存在本地，但我还需要刷新或重新运行我所处的视图/状态的控制器，以便当前视图可以利用存储中的新数据。

我的index.html：

  <ion-side-menu side="left" ng-controller="sidebarController">
    <ion-header-bar class="bar-positive">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <div class="list has-header">
      <div class="item item-icon-left" ng-click="refreshData()"><i class="icon ion-refresh"></i> Refresh My Data</div>          
    </div>
  </ion-side-menu>

  <ion-side-menu-content>
    <ion-nav-view></ion-nav-view>
  </ion-side-menu-content>

</ion-side-menus>

正如您所看到的，侧边栏有自己的专用控制器sidebarController，您可以在此处看到：

app.controller('sidebarController', ['$scope', '$ionicSideMenuDelegate', '$storage', '$registerService', '$ionicLoading', '$ionicPopup',
  function($scope, $ionicSideMenuDelegate, $storage, $registerService, $ionicLoading, $ionicPopup) {

    $scope.refreshData = function () {

        // Display loading modal
         $ionicLoading.show({
          template: 'Syncing with server...'
        });

        // Call the getMemberDetails service
        var memberNo = $storage.get('memberNo', '');
        $registerService.getMemberDetails(memberNo).
        success(function(data, status, headers, config) {

            // Store details to local storage
            $storage.setObject('member', data.member);

            // Close loading modal and sidebar
            $ionicLoading.hide();
            closeSidebar();

            // Display success message
            var alertPopup = $ionicPopup.alert({
                title: 'Success',
                template: 'Your data hsa been successfully sycned.'
            });

        }).
        error(function(data, status, headers, config) {

            $ionicLoading.hide();
            var alertPopup = $ionicPopup.alert({
                title: 'Oops',
                template: 'An error occured while trying to sync with our servers. Please make sure you have a data connection.'
            });

            // Close the sidebar
            closeSidebar();

        });

    }

    function closeSidebar () {
        if ($ionicSideMenuDelegate.isOpenLeft()) {
            $ionicSideMenuDelegate.toggleLeft();
        }
    }

  }
]);

所以基本上在refreshData ()运行之后，我需要找出我当前所处的状态或视图，然后为该视图重新运行控制器。有一种简单的方法吗？

Answer 1

这里有两个选项：

在数据发布后从sidebarController广播事件已成功同步并向控制器添加逻辑以进行侦听对于该事件并更新模型/视图。
将您的数据（成员）存储在服务中，并使不同的控制器使用与数据相同的引用。然后，Angular会通过更改检测来刷新视图。

我会选择第二种选择。由于您将逻辑集中在如何在负责获取数据的服务中加载数据。控制器仅与服务返回的数据一起使用。此外，您只需在刷新数据时向服务器发出一个请求。

服务示例：

angular.facorty('Member', function($http) {
  
  var items = [];
  
  return {
  
    items: items,
    refresh: function() {
      items.length = 0; // clear the items
      return $http
        .get(...)
        .then(function(res) {
          angular.forEach(res.data, function(item) {
            items.push(item);
          });
        });
    }
  }

})
.controller('sidemenuController', function(Member) {
  // show loading here
  Member.refresh().finally( /* hide loading */)
})
.controller('MembersController', function($scope, Member) {
  $scope.members = Member.items;
  Member.refresh(); // additionally show some loading indication
});

Answer 2

尝试从控制器调用$route.reload()。

Answer 3

当你运行js时，AngularJS会跟踪你对<div id="container"> This div is forcing the site to be 960px width.<br/> Also It holds all the content that the site has <div id="extra"> I would like to make this div responsive full width so that the image that the div holds will always be stretched from browser's left border to the right border </div> </div>的更改，除了两个（可能更多，但有两个主要）场景：
1.及时调用代码时（例如通过setTimeout（）） 2.当事件运行代码时（角度无法预测）。

在这两种情况下，您应该使用$scope来触发Angular＆＃34;魔术引擎＆＃34; ：）

天真的例子：

$scope.apply();

此网站可能有所帮助： AngularJS $watch() , $digest() and $apply() tutorial

旁注：您可以使用function myJsonUpdated(jsonData){ $scope.apply(function(){ $scope.myscopeData... = jsonData... }); }代替，但在我看来，申请是更好的做法。

如何重新运行当前$ state的控制器？

3 个答案: