angularjs - 在 AngularJS 中不通过 ID 引用 div 来显示成功/失败消息

Question

我正在使用 AngularJS 制作一个简单的表单来将新记录添加到数据库中。所以我在控制器中通过 ajax 提交了表单，它成功地添加了一条新记录。

我的问题是，向用户显示成功确认的 Angular 方式是什么。如果这是 vanilla JS，我只会隐藏表单，同时显示先前隐藏的成功消息。然后淡出消息并在几秒钟后恢复表单。

在 Angular 中有没有更好的方法来做到这一点？除了 $('form#myForm').hide() 和 $('div#successMessage').show()？

Answer 1

您可以使用ngShow指令来完成此操作。例如，如果您在成功提交后设置$scope.submissionSuccess为true，您可以在模板中添加如下内容：

<div ng-show="submissionSuccess">It worked!</div>

Answer 2

在 Angular 中有没有更好的方法来做到这一点？除了 $('form#myForm').hide() 和 $('div#successMessage').show()？

是的，您可以使用ng-show或ng-hide。

假设您有一些方法getRunningState()可以根据某种状态返回 1 到 4 的整数。所以我们可以这样写：

 <span ng-show="getRunningState() == 1">Running...</span>
 <span ng-show="getRunningState() == 2">Paused</span>
 <span ng-show="getRunningState() == 3">Stopped</span>
 <span ng-show="getRunningState() == 4">Finished!</span>

在这种情况下，将仅显示 4 个选项中的一个

作为旁注

如果您有兴趣将成功/失败放入对话框（我的观点似乎不错），这里是基于以下示例：

• 引导程序的 CSS
• 用户界面引导

function DialogDemoCtrl($scope, $dialog, $http){

  // Inlined template for demo
  var t = 
          '<div class="modal-body">'+
          '<div class="alert alert-success" ng-show="true">'+
'   <button type="button" class="close" data-ng-click="close(result)" >x</button>'+
'   <strong>Done!</strong> {{successTextAlert}}'+
' </div></div>';

     $scope.successTextAlert = "Some content";
     $scope.showSuccessAlert = true;     


  $scope.opts = {
    backdrop: true,
    keyboard: true,
    backdropClick: true,
    template:  t, // OR: templateUrl: 'path/to/view.html',
    controller: 'TestDialogController',
    resolve: {}
  };

  $scope.openDialog = function(){

    $scope.opts.resolve.successTextAlert = function() {
            return angular.copy($scope.successTextAlert);
        }

         $scope.opts.resolve.showSuccessAlert = function() {
            return angular.copy($scope.showSuccessAlert);
        }

    var d = $dialog.dialog($scope.opts);
    d.open().then(function(result){
      if(result)
      {
        alert('dialog closed with result: ' + result);
      }
      else{
        alert('dialog closed');
      }
    });
  };

}

就我而言，我显示“成功”（引导程序）

演示Plunker

您可以通过仅更改一行来更改对话框类型/颜色：

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>