javascript - Angular JS 表单仅在第一次运行

Question

我刚开始学习 Angular，我实现了这个表单: http://codepen.io/jgrecule/pen/WxgqqO

它应该做的是非常基本的:它根据 Flicker 规范使用 Flickr 公共(public) JSONP 提要 https://www.flickr.com/services/feeds/docs/photos_public/并呈现检索到的图片缩略图

我实现的表单有一个提交按钮和一个重置按钮。我正在尝试按照重要性顺序找到解决方案的问题是:

1. 第一次输入标签时一切正常，但是当您尝试通过添加新标签或用户 ID 或任何其他方式再次提交请求时，它不再有效。我可以在日志中看到这个警告，但我不知道是什么导致了它WARNING: Tried to load angular more than once.
2. 重置仅适用于缩略图，不适用于我页面中的其他控件
3. 我想找到一种方法，在用户按下 search flicker 按钮并且标签和用户 ID 输入字段均为空时显示错误消息。我试图实现一个自定义指令，但无法让它工作。

提前感谢您的投入。

Answer 1

1. 您正在加载 Angular 不止一次。

   

2. 您的 resetForm 函数根本不会重置表单。它只是在两个表单元素上调用了 $setValidity。
   看起来它确实尝试在代码的另一部分使用

   重置表单

   document.getElementById("searchCriteriaTags").innerHTML = "";
   document.getElementById("searchCriteriaIds").innerHTML = "";
   document.getElementById("images").innerHTML = "";
   

   这意味着您正在直接修改 DOM，有关内容请参见第 4 点。

3. 您可以添加一个简单的检查，检查是否 $scope.form.tags === '' 以及表单中的其他字段是否相同。

4. 解决了您的 3 点后，恐怕您的代码存在更大的问题。您直接到处修改 DOM，并且有很多重复代码，还有很多非常复杂的条件。

---

EDIT 1 回应 OP 的评论:

1. 清除表单字段的 Angular 方法是简单地清除表单字段绑定(bind)到的范围对象。换句话说，它就像做这样的事情一样简单:

   $scope.tags = [] // for arrays
   $scope.name = '' // for strings
   

   因为表单字段通过 ng-model 指令绑定(bind)到这些范围变量，所以更改变量也会更改表单字段。

2. 当两个字段为空时设置错误消息，您可以这样做:

   $scope.checkFields = function(field1, field2) {
       var oneEmpty = field1 === '';
       var twoEmpty = field2 === '';
       if (oneEmpty && twoEmpty) {
           // call the failure message here
       }
   }
   

---

EDIT 2 在回复评论中:

1. 首先很高兴看到您的代码看起来干净多了。其次，它失败的原因是因为在您的搜索功能中您将搜索字段设置为 null，例如 searchCriteria.tags = null;。您应该将它们设置为空字符串:searchCriteria.tags = '';。

2. 我不知道checkFields 的用途是什么，所以我不知道你想把它放在哪里。如果你想在字段为空时显示错误消息，那么我会说 checkFields() 返回一个 bool 值并使用 ng-show 来显示错误 div 如果checkFields() === false。

   HTML:

   <div ng-show="checkFields() === false">Fields can't be empty</div>
   

   JS:

   $scope.checkFields = function(field1, field2) {
       var oneEmpty = field1 === '';
       var twoEmpty = field2 === '';
       return (oneEmpty || twoEmpty);
   }