Ng-switch嵌入自定义指令中，当值改变时不被计算

Question

我创建了一个自定义指令，基本上是一个可重用的表单。表单的一部分是错误消息显示，它使用ng-switch:

<div ng-switch="status">
  <span ng-switch-when="Error" class="text-error">Error encountered</span>
  <span ng-switch-when="Verifying" class="text-info">Verifying</span>
  <span ng-switch-when="Success" class="text-success">Success</span>
  <span ng-switch-default>&nbsp;</span>
</div>

在我的指令的控制器中，我定义了一个与服务器执行验证的函数:

$scope.verify = function () {
   $scope.status = 'verifying';
   socket.emit('verify', $scope.data, function(result) {
     $scope.status = result;
   });
};

当输入框发生模糊事件时，link函数调用该函数。

我注意到的是，"验证"状态从未显示，但"错误"/"成功"状态工作良好。似乎只有在我当前的指令完成处理之后，AngularJS才会处理ng-switch指令。

我做错了什么吗?是否有一种方法可以让我绕过这种行为，以便验证状态会出现?

Answer 1

在Angular完成$digest循环并渲染视图之前，变量就发生了变化。尝试通过$timeout异步调用emit，这将允许框架呈现当前视图，然后在数据加载完成后更新它:

$scope.verify = function () {
   function afterLoading(){
       socket.emit('verify', $scope.data, function(result) {
           $scope.status = result;
       });
   }
   $scope.status = 'verifying';
   $timeout(afterLoading, 0);
};

(还记得在控制器中注入$timeout服务)