CODEWITHSUNDEEP
angularjsangularjs-directive
alfredopacino
alfredopacino

Reputation: 3241

ng-repeat and polymorphic directive

I'm wondering if there is a way to build a custom Element directive to use with ng-repeat in this way:

<div class="list">
      <my-custom-directive class="item item-icon-right" ng-repeat="a in concepts">
          <p>{{::a.label}}</p>
          <i class="icon ion-forward muted"></i>
      </my-custom-directive>
</div>

my-custom-directive should compile itself in an anchor if a.href exists, in a paragraph if it doesn't.

The problem basically is merely design: I have some items which doesn't have an href, but they should still be in the list. In Ionic1 it looks like I can do a div list or an a list, but not mixing up without breaking the list design..

Upvotes: 0

Views: 97

Answers (1)

tanmay
tanmay

Reputation: 7911

Sure you can. Something like this:

<my-custom-dir ng-repeat="a in concepts"></my-custom-dir>

where, directive is like,

app.directive('myCustomDir', function() {
  return {
    restrict: 'E',
    templateUrl: 'custom.html'
  }
})

And, the custom.html template,

<p ng-hide="a.href">{{::a.label}}</p>
<a ng-href="{{a.href}}" ng-show="a.href">{{::a.label}}</a>
<i class="icon ion-forward muted"></i>

Also, I kept the $scope.concepts to have dummy object as follows,

$scope.concepts = [{
    href: 'eample.com',
    label: 'example'
  }, {
    label: 'example1'
  }, {
    href: 'eample2.com',
    label: 'example2'
  }]

working example

Although, I think you should be able to have a div.item with ng-repeat inside your .list. And in the div.item you should be able to have whatever you want (not sure how ionic1 deals with that though)

Upvotes: 1

Related Questions