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;
   });
};

然后，输入框的模糊事件上的链接功能调用此函数。

我注意到的是＆＃34;验证＆＃34;状态永远不会出现，但是＆＃34;错误＆＃34; /＆＃34;成功＆＃34;国家工作正常。看来Angular只在我的当前指令完成处理后才处理ng-switch指令。

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

Answer 1

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

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

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

嵌入在自定义指令中的Ng-switch在值更改时不会被评估

1 个答案: