Question

我正在使用$ window.addEventListener（'beforeunload'...来检测是否已对页面进行了更改，并且它基本上按预期工作。我也正在使用$ transitions.onStart ...来检测当我使用后退/前进浏览器按钮时，我不知道这是如何工作的，因为我的HTML模板中没有任何表单标签，只需在div内输入即可。

我已经对此进行了研究，但似乎没有找到答案，除了不必使用表单标签来检查输入内容是否肮脏。我只是不确定这在后台实际上是如何工作的。

<div class="modal-header bg-primary">
  <button type="button" class="close" data-dismiss="modal">&times;</button>
  <h4 class="modal-title pull-left">New Note</h4>
  <div class="clearfix"></div>
</div>
<div class="modal-body">
  <input type="textfield" ng-model="detailVM.newNoteContent">
  <button ng-click="detailVM.addNewNote()">
    Save New Note <span class="fa fa-check"></span>
  </button>
</div>

这是我的HTML代码。

        // For page reloads and attempts to leave the site
        $window.addEventListener('beforeunload', function (e) {
            // Cancel the event
            e.preventDefault();
            // Chrome requires returnValue to be set
            e.returnValue = '';
        });

        // For when a user hits the back button 
        $transitions.onStart({}, function ($transition)
        {
            var answer = confirm("Are you sure you want to leave this page? Changes you made may not be saved.")
            if (!answer) {
                $transition.abort();
                return false;
            }
            return true;
        });

这就是我在控制器中拥有的东西。

当我在输入中输入数据然后尝试重新加载，关闭或单击“后退”按钮时，这些消息会显示消息：“确定要离开此页面吗？”但是如何检测输入是否脏污？

Answer 1

ng-model不需要放在form中，它的验证程序就可以工作。

来自AngularJS文档：

ngModel指令绑定input，select，textarea（或自定义格式）   控件）使用NgModelController到作用域上的属性，即   由该指令创建和公开。

ngModel负责：


将视图绑定到模型中，其他指令（例如输入，   textarea或选择“ require”。

提供验证行为（即   必填，数字，电子邮件地址，网址）。

保持控件状态   （有效/无效，脏/原始，已触摸/未触摸，验证错误）。

在元素上设置相关的CSS类（ng-valid，ng-invalid，   ng-dirty，ng-pristine，ng-touched，ng-untouched，ng-empty，   ng-not-empty），包括动画。

向其注册控件   父form。


— AngularJS ng-model Directive API Reference

如果存在form，则ngModelController会将其控件注册到表单中。这为您提供了一个不错的容器，用于跟踪整个输入/控件集的状态。

当不使用表单标签时，angularjs如何检测$ dirty？

1 个答案: