Angularjs 需要星号答案

【问题标题】：Angularjs required asteriksAngularjs 需要星号
【发布时间】：2014-04-24 17:34:22
【问题描述】：

我会有一个带有大表单的指令，其中一些字段是必需的，而另一些则不是。必填字段标有required 属性。

我想在所有输入前加上<span class='something'>*</span> 基本上是这样的：$("input[required]").prepend(<span class='something'>*</span>)

我对 angularjs 的理解仍然有限，指向我的指令的编译功能，但当我到达那里时我迷路了。

免责声明：我的直觉告诉我，做这样的事情并不是真正的“角度”方式 - 没关系，无论我最终是否使用这种技术，我都想知道如何做到这一点。也就是说，我也欢迎更多“有角度”的建议。

谢谢！

【问题讨论】：

如何将所需属性添加到输入中？
声明式。它在指令的 HTML 中。
对，但不是动态添加的？如果它不是动态的，那么您已经知道哪些字段是必需的，因此可以在添加 required 属性的地方添加 *。如果它是动态的，那么我想知道它们是如何被动态添加的。
不，它们不是动态添加的，你说得对，我可以自己去添加星号。我不想那样做。我想工作，所以标记 required 的行为会使星号自动出现
好的，我知道你从哪里来了，马上回答。

标签： angularjs

【解决方案1】：

只要 DOM 操作进入对话，指令就是要走的路。您希望在任何具有 required 属性的输入之前添加一个 *，因此您希望从所需的属性创建一个指令。像这样的：

myModule.directive("required", function() {
   return {
       restrict: 'A', //only want it triggered for attributes
       compile: function(element) {
          //could add a check to make sure it's an input element if need be
           element.prepend("<span class='something'>*</span>");
       }
   }
}

【讨论】：

整洁！和角度-y。谢谢。
这似乎在 <input > 中不起作用，但在 <div> 上运行良好。请指教。
不知道为什么会有所作为。把重现问题的小提琴放在一起，我可以看看。
看起来您需要 .after 和 .before 而不是 .prepend 和 .append 的输入。还不知道为什么。
@americanslon，它不适用于输入，因为输入元素没有内容。即使你手动写<input>Something Here</input>，浏览器也会忽略其中的内容。 .append() 和 .prepend() 都在当前元素 inside 中插入内容，因此不适用于输入。与input:before doesn't work 相同的原因。正如您所指出的，您应该可以使用 .after() 代替。虽然.before() will create an infinity loop

【解决方案2】：

input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position: right;
}

图片右侧有一些 20px 的空间，不与选择下拉箭头重叠

【讨论】：

【解决方案3】：

committeeApp.directive("requiredStar", function ($compile) { 
return { 
    restrict: 'AE', 
    require: "^form", 
    link: function (scope, element, attrs, ctrl) { 
        var varName = ctrl.$name + "." + attrs.name + ".$error.required";           
        var a_input = angular.element($compile('<span style="color:red;" ng-show="' + varName + '" >&#10033;</span>')(scope)); 
        element.parent().prepend(a_input); 
    } 
};

【讨论】：