Question

我有侧边菜单，显示用户个人资料图片和用户名。当用户从我的设置页面更新这些信息时，它不会更新侧边菜单信息。

服务功能

//My service function
myApp.factory('User',function(Auth,dataService){

    var userInfo = null;

    return {
        getUserInfo:function(){
            if (userInfo == null){
                var loggedIn = Auth.isLoggedIn();
                var inputs = {auth_token:loggedIn.auth_token};
                console.log("Input User "+JSON.stringify(inputs));
                var promise = dataService.getUserInfo(inputs).then(function(response){
                    userInfo = response;
                    return response;
                });
                console.log("USERINFO IS "+ JSON.stringify(promise));
                return promise;
            }
            return userInfo;

        },
        refreshUserInfo:function(){
            var loggedIn = Auth.isLoggedIn();
            var inputs = {auth_token:loggedIn.auth_token};
            console.log("Input User "+JSON.stringify(inputs));
            var promise = dataService.getUserInfo(inputs).then(function(response){
                userInfo = response;
                return response;
            });

            return promise;
        }
    };
});

侧边菜单查看

 //Side menu View

     <ion-side-menu side="left"  id="leftSideMenu" class="menu_containor" style="visibility: hidden;" drag-content="false">

          <ion-content>
              <div>
                  <div class="about_top no_back">

                      <div class="menu_left_img">

                          <img src="{{userInfo.pic_url}}" width="110" height="110">
                      </div>
                      <!--<a href="#" class="red_icon"><img src="img/menu-redicon.png"  width="32"></a>-->
                      <div class="menu_right_txt">
                          <h3>Hello,</h3>
                          <h1>{{userInfo.user_firstname}}</h1>
                      </div>
                  </div>


              </div>

              </ion-content>


  </ion-side-menu>

控制器：侧菜单控制器

//Side Menu Controller
appController.controller('AppCtrl', function($scope,$ionicPlatform, $ionicModal, $timeout,$state,User,definedVariable,$ionicSideMenuDelegate) {
    $ionicPlatform.ready(function() {

        //Get user information
        if (User.getUserInfo().length > 0){
            $scope.userInfo = User.getUserInfo()[0];

        }else{
            User.getUserInfo().then(function(response){
               $scope.userInfo = response[0];

            });
        }



    });

})

控制器：设置控制器

//Settings Controller

.controller('settingsCtrl',['$scope','$stateParams','$ionicPlatform','$timeout','$ionicSideMenuDelegate','$ionicModal','Auth' ,
        '$location','$ionicActionSheet','countryList','User','definedVariable','dataService','adMobHelper',
        function($scope, $stateParams,$ionicPlatform,$timeout,$ionicSideMenuDelegate,$ionicModal,Auth,$location,$ionicActionSheet,countryList,User,definedVariable,dataService,adMobHelper) {
        $ionicPlatform.ready(function() {


            window.scope = $scope;


            $scope.userData = {};
            var user = User.getUserInfo();
            if (user.length >= 0){
                $scope.userData = user[0];
            }else{
                user.then(function(result){
                   $scope.userData = result[0];
                });
            }


            var modalOptions = {

                updateUserAction:function(){
                    console.log(dataService.get_auth_token().auth_token);
                    var loggedIn = Auth.isLoggedIn();
                    $scope.updated.auth_token = loggedIn.auth_token;
                    if (Auth.getPicId() != null){
                        $scope.updated.pic_id = Auth.getPicId();
                    }

                    Auth.update_user($scope.updated).then(function(result){

                       if (result){
                           var promise = User.refreshUserInfo().then(function(response){
                               $scope.modal.hide();
                           });
                           //$scope.modal.hide();
                       }else{
                           alert("Something went wrong");
                       }
                    });

                },

            };

            $scope.modalActions = modalOptions;

            $ionicModal.fromTemplateUrl('templates/editProfile.html', {
                scope: $scope
            }).then(function(modal) {
                $scope.modal = modal;
            });


        });
    }])

提前谢谢

Answer 1

在我的工厂

$rootScope.$broadcast('user:updated',userInfo);

在我的app控制器中负责菜单内容

$scope.$on('user:updated', function(event,data) {
            // you could inspect the data to see if what you care about changed, or just update your own scope
            $scope.userInfo = User.getUserInfo()[0];
        });

Answer 2

我发现AppCtrl内的以下内容是更新用户信息的更好方法。

// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
$scope.$on('$ionicView.enter', function(e) {
    if(AuthService.isLoggedIn()){
        $scope.loggedIn = true;
        //Maybe grab some user info and stuff it in a variable.
    } else {
        $scope.loggedIn = false;
    }
});

Answer 3

您应该在控制器中设置userInfo，如下所示：

$scope.userInfo = function() {
  return User.getUserInfo()[0];
}

并以这种方式在你的HTML中访问它：

{{userInfo().pic_url}}
...
{{userInfo().user_firstname}}

通过这种方式，当您在工厂中更改var时，var将会更新。

更新侧面菜单，其中新内容从另一个控制器离子更新

3 个答案: