Angularjs范围变量不更新视图

时间:2017-08-17 17:53:59

标签: javascript angularjs

我已经在SO上看到了很多这个问题,但我尝试过的解决方案都没有为我工作。我尝试使用$apply(),这给我一个错误,说明摘要周期已经在运行。我尝试使用Dot"。"符号,但没有任何变化。我甚至尝试使用超时和承诺,但它仍然没有在视图中更新。

这是HTML:

<th colspan="4" ng-class="{'ssqtrue': deficiencies === false , 'ssqfalse': deficiencies === true}">
<span ng-model="definfo">{{definfo}}</span>
    </th>

这是我的控制器代码:

    $scope.recalculateDashboard = function (goToDashboard) {
    contractorService
      .calculateScores()
      .success(function () {
          getscoringDetails();
          getDefInfo();
          if (goToDashboard) {
              $scope.tabs[0].active = true;
          }
      }).error(function (reason) {
          console && console.log(reason.statusText);
          genericErrorAlertHandler();


      });
};

function getDefInfo() {
    contractorService.getDeficiencyInfo()
      .success(function (data) {
            $scope.$apply(function() {
                $scope.definfo = data;
            });
          if ($scope.definfo == 'No Deficiencies Found') {
              $scope.deficiencies = false;
          } else {
              $scope.deficiencies = true;
          }
      }).error(function (reason) {
          console && console.log(reason.statusText);
          genericErrorAlertHandler();


      });
}

对于我的生活,我无法弄清楚这里发生了什么。非常感谢任何帮助!

2 个答案:

答案 0 :(得分:0)

  

问候<span ng-model="definfo">{{definfo}}</span>

这里你不需要ng-model指令。足够使用{{definfo}}或更好的方式,像人们指向使用ng-bind一样:

<span ng-bind="definfo"></span>
  

我尝试使用$apply(),这给了我一个错误

通常,开发人员在使用jQuery之类的3d派对代码进行回调时会使用$scope.$apply。所以不要使用它。顺便说一句,安全方式是使用$timeout例如a.e.换行:

 $timeout(function () {
   $scope.definfo = data;
 }); 

我相信如果您不使用Promise链,您可以使用successerror回调(您实际执行的操作)代替使用then()

  

关于$http.get('/SSQV4/SSQV5/Contractor/GetDeficiencyInfo');

$http.get会返回原始承诺,但它也会返回status 'Ok',配置,标题...我确定您不希望在您的控制器中解析完整的响应。 所以我会在你的服务中创建新的Promise并仅获取结果。

相反:return $http.get(URL);我会在服务中写:

  this.getDeficiencyInfo = function () {          
  var deferred = $q.defer(); 
      $http({method: 'GET', url: URL}).then(function(res){
         deferred.resolve(res.data); 
      }, function (error) {
            console.error(error);
            deferred.resolve({error:error}); //actually you can reject
        });    
     return deferred.promise;
  };

DEMO in fiddle

答案 1 :(得分:0)

我想出来了,虽然我不知道“为什么”它引起了这个特殊问题。页面首次加载时$scope.definfo由另一个http调用的变量设置。变量var pagedata = []包含首次呈现页面时从服务返回的大量信息。然后使用以下代码设置范围变量:$scope.definfo = pagedata.DeficiencyInfo。删除该行并直接调用函数getDefInfo,根据需要设置和更新范围变量。也许你们中的一位大师可以解释为什么这对我和其他人来说可以帮助别人。感谢大家的帮助。