Angular JS表单第一次运行

Question

我在Angular学习的最开始，我实现了这个形式： http://codepen.io/jgrecule/pen/WxgqqO

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

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

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，并且您有很多重复的代码，以及许多非常复杂的条件。

编辑1 以回应OP的评论：

1. 清除表单字段的Angular方法是简单地清除表单字段绑定的范围对象。换句话说，它就像做一样简单：

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

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

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

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

编辑2 在回复评论中：

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

2. 我不知道checkFields的目的是什么，所以我不知道你想把它放在哪里。如果您想在字段为空时显示错误消息，那么我会说checkFields()返回一个布尔值并使用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);
   }