how to show an empty template in custom directive

Question

how to show an empty template in custom directive

I am working on a custom directive that will show the transcluded empty template when there is nothing to show in the scope -- as in this plunker.

I could not achieve to remove the empty template in ng-repeat nor I was able to show the empty message only when there is no data. How can I display the empty template when there is nothing to show?

javascript
angularjs
ng-repeat

Answer 1

Actually I am not sure that it is right way to do it in directive - you'll better show different DIVs inside of your main template.

But here is my idea: instead of transclude, do manual compiling depending on is there any items to show or not.

Here is working (but still little bit dirty) plunker: http://plnkr.co/edit/dxUjpeCbSKKjaXqK9qBF?p=preview

Note, that even as I am watching whole list, re-compiling is done only when state (empty/non-empty) is changed.

Note2: It is not full transclusion - scope inside of templates (empty and not empty) will be isolated to directive's scope. You can workaround that by using different compilation or child scopes - there are couple solutions, but they are not related to this question :)

Answer 2

You don't need a directive for this. Just remove the directive from app.js and replace the code after buttons with this:

  <div ng-hide="things.length">nothing to show here</div>
  <div ng-show="things.length">
    <ul>
      <li ng-repeat="thing in things">thing #{{thing}}</li>
    </ul>
  </div>

Here's the working code: http://plnkr.co/edit/u4FF77y6dhXHj0FQC9Ai?p=preview