Ben Aston Ben Aston - 5 months ago 11
AngularJS Question

AngularJS control over precise DOM rendered by directive

I want to "directivize" search results. Each result will be rendered as a

li
within a
ul
HTML tag.

This means that I want to avoid the default AngularJS behavior of rendering to the DOM the containing directive element.

<ul>
<my-result>
<li></li>
</my-result>
<my-result>
<li></li>
</my-result>
</ul>


I have tried using
replace: true
, but this results in a
TypeError
:


definition.match is not a function


Can someone point me in the right direction here? Perhaps I should use an attribute directive, but then I am unsure how to bind the isolate scope items?

My directive looks like this:

var template = require('text!./template.html');

return function() {
return {
restrict: 'E',
scope: {
select: '&',
result: '=',
},
template: template,
};
};


I am using an
ng-repeat
to render the results:

<ul>
<my-result
ng-repeat="result in results"
result="result"
select="select({result:result})"
>
</my-result>
</ul>


I am using Angular 1.4.

gyc gyc
Answer

The replace option is deprecated. (since 1.3 I think?)

It would look better if your directive template included the <ul> element. In which case you wouldn't have the problem of seing the directive element between <ul> and <li>.

If you have no other option, as you said you can still use the directive as an attribute of the <li> like so:

<ul>
  <li my-result
    ng-repeat="result in results"
    result="result"
    select="select({result:result})"
  >
  </li>
</ul>

result and select should still be available to your directive's scope.

Comments