Angularjs需要星号

Question

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

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

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

免责声明：我的直觉是告诉我，做那样的事情并不是真的＆＃34;棱角分明的＆＃34;方式 - 没关系，无论我是否最终使用这种技术，我都想知道如何做到这一点。那说我更欢迎＆＃34;棱角分明＆＃34;建议也是。

谢谢！

Answer 1

每当DOM操作进入对话时，指令就是可行的方法。您希望将*添加到具有required属性的任何输入，因此您需要根据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>");
       }
   }
}

Answer 2

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

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

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