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

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 遍历，从而避免使用 ids 和forjQuery，我建议将指令放在标签上而不是输入上：

<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... jqLit​​e 没有实现 before()。