Question

我正在编写一个自定义指令，它将为required输入字段添加一个星号。这是我的链接功能，用注释解释：

// The DOM looks like this:
// <label id="label-1" for="example-1">Name:</label>
// <input id="example-1" type="text" acc-required>

function (scope, element, attrs) {
    // element would be input node
    // I included jQuery, so that I can use the selector as following.
    var label = $("label[for='" + element.attr('id') + "']");
    if (label) {
        // @ add asterisk to the label of a required input field
        var abbrElement = angular.element('<abbr title="required" class="required-marker"">*</abbr>');
        label.append(compile(abbrElement)(scope));
    }
}

根据输入的id属性选择标签是否有气味？

Answer 1

为了避免DOM遍历，以及使用id和for和jQuery，我建议将指令放在标签而不是输入上：

<label acc-required>Name:</label>

app.directive('accRequired', function() {
   return {
      compile: function(element) {
         element.append('<abbr title="required" class="required-marker"">*</abbr>');
      }
   }
});

更新：使用@ stevuu的HTML，这是检查没有id的标签的一种方法，同时将指令保留在表单元素上：

<label>Name1:
    <input type="text" acc-required>
</label>

app.directive('accRequired', function() {
    return function(scope, element, attrs) {
        var label = element.parent();
        if(label) {
            element.before('<abbr title="required" class="required-marker">*</abbr>');
        }
    }
});

fiddle

请注意，$ compile不是必需的，因为我们添加的HTML不包含任何指令。

我确实需要为此包含jQuery ... jqLite之前没有实现（）。

是否有更“'角度”的方式来实现这一点（两个元素之间的通信）？

1 个答案: