离子angularjs中的$ scope值不会更新侧面菜单

时间:2016-01-13 15:40:47

标签: javascript angularjs ionic

我的离子应用中存在一个问题,其中包含namepicture及其父级和abstract:true的侧边菜单。在同一个控制器中,有一个更新功能,它更新scope.picture,但侧面菜单图片不会更新。

controller('AppCtrl', function($scope,$window,$rootScope,$location,$http,$state,$cordovaCamera,$ionicLoading,$q,login_Service) 
{               
    $scope.user_Name=$rootScope.u_name;            
    $scope.uid=$rootScope.user_id;
    $scope.pass=$rootScope.password;
    $scope.user_Picture=$rootScope.pic;
    $scope.whats=$rootScope.wh; 

    $scope.update_u=function(topic){      
        $scope.user_Picture=topic['picture']; 
        $scope.whats=topic['e_whats'];
    }                  
});

this is side-menu template 

<ion-side-menus>

  <ion-side-menu-content>
    <ion-nav-bar class="bar-light nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-side-menu-content>
  <ion-side-menu side="left">

    <!-- Sidebar Content -->
    <ion-content class="gem-sidebar dark">
      <!-- Profile Box - Extends ionic's .row -->
      <div class="row gem-sidebar-profile-box">
        <!-- Profile Thumb -->
        <div class="col col-25">
          <img src="img/gemionic/no-photo.jpg" ng-if="!user_Picture" class="gem-profile-image" alt="">
           <img src="http://www.cssolutionshub.com/php/images/user_img/{{user_Picture}}" ng-if="user_Picture" class="gem-profile-image">
        </div> 
        <!-- End Profile Thumb -->

        <!-- Profile Name -->
        <div class="col col-50">



          <h6> <a menu-close href="#" ng-click="edit_prof()">Edit Profile</a></h6>
          <h5 ng-if="user_Name !== undefined">{{user_Name}}</h5>
          <h4>{{whats}}</h4>
        </div>
        <!-- End Profile Name <a -->

        <!-- Account Settings Icon -->
        <div class="col col-25 gem-text-center">
          <i class="gem-profile-settings-icon ion-volume-high"></i>
        </div>
        <!-- End Account Settings Icon -->

      </div>
      <!-- End Profile Box -->
      <!--<ion-list>        
        <ion-item class="item-ng-click" nav-clear menu-close ng-click="login()">Login</ion-item>
        <ion-item nav-clear menu-close href="#/app/feed">Feed</ion-item>
        <ion-item nav-clear menu-close href="#/app/start">Starter View</ion-item>


      </ion-list> -->
    </ion-content>
    <!-- End sidemenu content -->
  </ion-side-menu>
</ion-side-menus>

这是我的编辑模板,其中点击了更新功能

<!-- Title for header bar (refer to www/index.html) -->
<ion-view title="Edit Profile">
  <!-- ======================
  LEFT SIDE BUTTON
  ====================== -->
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>

  <!-- ======================
  RIGHT SIDE BUTTON
  ====================== -->
  <ion-nav-buttons side="right">
    <button class="button button-icon icon ion-checkmark-circled"></button>
  </ion-nav-buttons>


  <!-- ======================
  MAIN CONTENT SECTION
  ====================== -->
  <ion-content class="has-header gem-ion-content profile-edit">
    <!-- ======================
    GEMIONIC PROFILE ADD PICTURE BANNER
    ====================== -->
    <!-- <div class="gem-profile-media">
      <div class="gem-profile-details profile2">
        <div class="text-center">
          <i class="icon ion-plus-circled add-user-pic-icon"></i>
          <p class="uppercase">Add user pic</p>
        </div>
      </div>
    </div> -->
     <img ng-if="topic.picture !== undefined && img===undefined " ng-src="http://www.cssolutionshub.com/php/images/user_img/{{topic.picture}}" alt="" width="100%" height="20%" ng-click="addMedia()"> 

             <img ng-if="topic.picture === undefined && img===undefined" ng-src="img/gemionic/no-photo.jpg" width="100%" height="20%" ng-click="addMedia()"> 
              <img src="{{img}}" ng-if="img!==undefined" width="100%" height="20%" ng-click="addMedia()">
    <!-- ======================
    END GEMIONIC PROFILE ADD PICTURE BANNER
    ====================== -->

    <!-- Standard Ionic List -->
    <div class="list">

      <label class="item item-input item-stacked-label">
        <span class="input-label">What Now</span>
        <input type="text" ng-model="topic.whats">
      </label>    

      <label class="item item-input item-stacked-label">
        <span class="input-label">Password</span>
        <input type="password" ng-model="topic.password">
      </label>
    <button class="button button-full button-positive" ng-click='update_u(topic)'>
      Update
  </button>
  <button class="button button-full button-positive" ng-click='go_feed()'>
      Cancel
  </button>
</div>
  </ion-content>
</ion-view>

3 个答案:

答案 0 :(得分:0)

尝试以下方法:

$scope.update_u=function(topic){
  $scope.whats = topic.whats;   
  $scope.user_Picture=topic['picture'];
}

答案 1 :(得分:0)

您可以尝试这个(在AppCtrl中)。 $ ionicView.beforeEnter函数中的代码将在每次调用视图时执行:

$scope.$on('$ionicView.beforeEnter', function () {
      // Code you want executed every time view is opened
      $scope.update_u=function(topic){      
          $scope.user_Picture=topic['picture']; 
          $scope.whats=topic['e_whats'];
      }
}

答案 2 :(得分:0)

这也可能是由于您的控制器缓存造成的。您可以使用sort(salesdt[, unique(company)]) user system elapsed 0.05 0.02 0.06 sort(unique(salesdt$company)) user system elapsed 0.01 0.01 0.03 salesdt[order(company), unique(company)] user system elapsed 0.03 0.02 0.05 行在route.js处停止它。 See this for a similar solution: