Question

我尝试将我的应用配置为在用户尝试提交带有空输入框的表单时显示提醒，但即使我确认弹出窗口也无法使其显示在同一申请中的其他地方。

为什么这段代码可能不起作用？

Codepen：http://codepen.io/anon/pen/VpjgJJ。

JS：

$scope.addTask = function() {
        if ($scope.taskName.length == "") {
            $scope.showAlert = function(ev) {
                $mdDialog.show(
                    $mdDialog.alert()
                        .parent(angular.element(document.querySelector('#popupContainer')))
                        .clickOutsideToClose(true)
                        .title('Error')
                        .textContent('You must enter a task name')
                        .ok('Close')
                        .targetEvent(ev)
                )
            }
        }

HTML：

<form class="md-padding">

  <div layout-gt-sm="row">

  <md-input-container class="md-block" flex-gt-sm>

    <label>Add New Task</label>

    <input type="text" ng-model="taskName" size="50">

  </md-input-container>

</div>

<md-button ng-click="addTask()" class="md-raised md-primary">Add</span></md-button>

Answer 1

您的代码无效的原因是因为在这一行：

$scope.taskName.length == ""

如果该字段未被用户修改，则范围内的

taskName变量永远不会被初始化（即使是空值）。

一些建议：

在task：

$scope

$scope.task = {}

将您的输入声明更改为<input type="text" ng-model="task.name" size="50">
$scope.taskName.length == ""看起来很奇怪，请使用$scope.taskName.length === 0

Answer 2

我更新了您的演示并使其正常运行。请检查working demo。您的代码中存在一些问题：例如尝试加载未知的资源，使用未定义的变量和错误的操作，如$scope.taskName.length == ""。最终你的代码有效：

if (angular.isUndefined($scope.taskName) || $scope.taskName.length === 0) {

    var alert =  $mdDialog.alert()
        .parent(angular.element(document.querySelector('#popupContainer')))
        .clickOutsideToClose(true)
        .title('Error')
        .textContent('You must enter a task name')
        .ok('Close');

    $mdDialog.show( alert )
        .finally(function() {
            alert = undefined;
        });
}

AngularJS - 将警报弹出连接到空输入

2 个答案: