Angularjs范围不起作用答案

【问题标题】：Angularjs scope not workingAngularjs范围不起作用
【发布时间】：2015-11-23 10:41:25
【问题描述】：

我正在使用基本的 angular.js 概念来显示和隐藏 div。由于某些原因，我无法使其工作。在上传文件时，我根据 registerStart 值显示一个 div 'myFormSpinner'。我正在创建一个电话间隙应用程序。

有人可以帮我找出问题所在。除了显示/隐藏 div 一切正常。下面是sn-p的代码：

 <div class="row" ng-controller="RegisterCtrl">  
 <div id="myFormSpinner"  ng-show="registerStart"> 
     <img src="img/ajax-loader.gif"> 
 </div> 
 <div class="col-md-8"> 
     <form class="ng-pristine ng-invalid ng-invalid-required" style="margin-top:5%;"> 
           <div class="col-md-6"> 
                  <input class="form-control " type="text" ng-model="registerData.Email" id="Email" name="Email" required placeholder="Email"> 
             </div> 
                <div class="col-md-offset-1 col-md-10 "> 
                   <input type="submit" ng-click="register()" value="Register" class="btn btn-default btn-primary"> 
                </div> 
     </form> 
 </div>

event.controller('RegisterCtrl',    ['$scope', '$state', '$q', '$http', 'eventService', 'authService', '$stateParams', '$rootScope', 'tokenService', 'imageService', 'spinnerService', 'appBackgroundService', 
function ($scope, $state, $q, $http, eventService, authService, $stateParams, $rootScope, tokenService, imageService, spinnerService, appBackgroundService) { 
var userNumber = 0; 
$scope.mediaUploadStart = false; 
$scope.eventId = $state.params.id; 

 $scope.register = function () { 
     $scope.registerStart = true; 
     console.log('scope.Pic=' + $scope.pic); 
     if ($scope.registerData.Email) { 

         spinnerService.show('myFormSpinner'); 
         $scope.mediaUploadStart = true; 
         var paramOptions = { 
             eventId: $state.params.id, 
             email: $scope.registerData.Email, 
             fb: {}, 
             number: userNumber, 
             provider: "Form" 
         }; 
         uploadPicAndData(paramOptions).then(function (result) { 
             var data = JSON.parse(result); 
             $scope.registerStart = false; 
             appBackgroundService.disableBackgroundMode(); 
         }, 
             function (error) { 
                 spinnerService.hide('myFormSpinner'); 
                 $scope.registerStart = false; 
                 appBackgroundService.disableBackgroundMode(); 
             }); 
         $scope.mediaUploadStart = false; 
         spinnerService.hide('myFormSpinner'); 
     } 
          }; 
 }])

【问题讨论】：

我不习惯这种语法，我推荐这个github.com/johnpapa/angular-styleguide。尝试将 $scope.registerStart 放在 register 函数之外，然后在函数内部切换它。

标签： angularjs phonegap-plugins

【解决方案1】：

您正在将 $scope 元素设置为异步模式。摘要循环无法确定已在异步模式下对范围元素进行了更改。

您应该使用 $apply 来激活摘要循环。

$scope.$apply(function () { $scope.registerStart = false; });

在此处阅读有关 $apply 的更多信息：http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

【讨论】：