javascript - 嵌入在自定义指令中的 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输入框的模糊事件函数调用。

我注意到的是“验证”状态从未出现，但“错误”/“成功”状态工作正常。似乎 AngularJSng-switch仅在我当前的指令完成处理后才处理该指令。

有什么我做错了吗？有没有办法让我绕过这种行为，以便显示验证状态？

Answer 1

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

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

$timeout（还记得在你的控制器中注入服务）