javascript - Is there a more 'Angular' way to implement this (communication between two elements)? -

i writing customized directive, add asterisk required input field. here link function, explained comments:

// dom looks this: // <label id="label-1" for="example-1">name:</label> // <input id="example-1" type="text" acc-required>  function (scope, element, attrs) {     // element input node     // included jquery, can use selector following.     var label = $("label[for='" + element.attr('id') + "']");     if (label) {         // @ add asterisk label of required input field         var abbrelement = angular.element('<abbr title="required" class="required-marker"">*</abbr>');         label.append(compile(abbrelement)(scope));     } } 

is smell select label based on id attribute input?

to avoid dom traversal, , hence use of ids , for , jquery, suggest putting directive on label rather input:

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

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

---

update: using @stevuu's html, here 1 way check label without ids, while keeping directive on form element:

<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

note $compile not required, since html adding not contain directives.

i did need include jquery this... jqlite doesn't implement before().