Javascript AngularJS-将警报弹出窗口附加到空输入

我正在尝试将我的应用程序配置为当用户尝试提交带有空输入框的表单时显示警报，但即使在同一应用程序的其他地方有确认弹出窗口，也无法使其工作

你知道为什么这个代码可能不起作用吗

代码笔：

JS:

HTML:

添加新任务
添加

---

您的代码不起作用的原因是因为在这一行：

$scope.taskName.length==”

如果用户未修改作用域中的

taskName

变量，则该变量永远不会初始化（即使是空值）

一些建议：

在

$scope

中创建

任务

对象：

$scope.task={}

将输入声明更改为

$scope.taskName.length==”

看起来很奇怪，请使用

$scope.taskName.length==0

---

我更新了你的演示并使它工作。请检查这个。您的代码中有几个问题：例如，尝试加载未知的资源、使用未定义的变量和错误的操作，如

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

---

为什么不使用required属性？我正在尝试将其配置为使用不会自动显示的警报消息

<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>

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