单击按钮后,离子角度更新$ scope变量

时间:2016-03-05 19:01:02

标签: javascript angularjs cordova ionic-framework

我想在点击保存按钮时更新我的​​$ scope变量,基本上我试图更新配置文件名称,所以当我按下保存按钮时我需要立即显示这个新名称在图像配置文件旁边的导航栏,我尝试了以下方式...但不适用于我,我确实使用$ apply:

controller.js



.controller('ProfileCtrl', function($ionicPlatform, $cordovaMedia, $scope, Words, Utilities, $timeout) {
   
   $scope.save = function(){

var content = toTitleCase($scope.editWordRow.title);
       //$scope.profilename = '';
        
       $timeout(function () {
         $scope.$apply(function () {
            $scope.profilename = content;
            console.log('profile name tiene esto, deberia mostrarse al salir de guardar: ' + $scope.profilename);
         });
       }, 2000);
};

// the follow $scope function is called when the controller starts

$scope.getProfileRow = function() {
    Words.getProfileSimple().then(function(single){
      if (single === null || single === undefined) {
      $scope.editWordRow = {
          title: null,
          congrats_path: null,
          name_sound_path: null,
          profile_image_path: null
      };  
      
     
      }
      else 
      {
      $scope.editWordRow = single;
      $scope.profilename = single.title;

      }
    
          
    });
      
  };
});




menu.html



 <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        
        <div style="margin: 0 auto; width:30px" ><img src="img/iconos/logo.png" width="30px" height="30px"></div>
        <div ng-controller="ProfileCtrl">
            <h4 style="color:#fff !important; margin: 5px !important;" >{{profilename}}</h4>
        </div>
 </ion-nav-buttons>
&#13;
&#13;
&#13;

调用save()函数的视图是:

inicio2.html

&#13;
&#13;
 <ion-nav-buttons side="right">
        
        
        <button class="button button-icon button-clear ion-ios-checkmark-outline" ng-click="save()">&nbsp;</button>
    </ion-nav-buttons>
&#13;
&#13;
&#13;

如果我在另一个视图中调用save()函数会出现问题吗?

谢谢,问候我会感激任何帮助!

2 个答案:

答案 0 :(得分:0)

如果要更新视图中不受当前控制器控制的值,您有两种方法:

  1. 触发事件并将其捕获到实际控制菜单的适当控制器上。
  2. 使用对两个控制器都是依赖关系的服务,并将变量的值存储在该服务中。
  3. 编辑:

    变量&#34; profileName&#34;附加到2路数据绑定的范围,然后在用户输入上更改,您可以这样做:

    $scope.$watch('profileName', function(changedProfileName) {
      $scope.$emit('profileName:changed', changedProfileName);
    });
    

    然后,在导航栏控制器中,您可以捕获事件:

    $rootScope.$on('profileName:changed', function(e, newProfileName) {
      $scope.profileNameToShow = newProfileName;
    });
    

答案 1 :(得分:0)

对于典型的应用程序,导航栏,页脚在所有视图中共享,如果您需要在页眉,页脚中共享范围值并在应用程序中使它们相同,则可以使用$rootScope.profilename指定它们。这样,每当您更新$rootScope.profilename时,它都会反映在整个应用中。