ng-repeat und polymorphe Richtlinie

Question

Ich frage mich, ob es einen Weg gibt, eine benutzerdefinierte Element Richtlinie zu verwenden, mit ng-repeat auf diese Weise zu bauen:

<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 sollte kompilieren sich in einem Anker wenn a.href existiert, in einem Absatz wenn nicht.

Das Problem ist im Grunde nur Design: Ich habe einige Elemente, die keine href haben, aber sie sollten immer noch in der Liste sein. In Ionic1 sieht es so aus, als könnte ich eine div Liste oder eine a Liste machen, aber nicht mischen, ohne das Listendesign zu zerstören.

Answer 1

Sicher kannst du. Etwas wie folgt aus:

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

wo Richtlinie ist wie,

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

Und die custom.html Vorlage,

<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> 

Auch hielt ich das $scope.concepts Dummy-Objekt zu haben, wie folgt,

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

working example

Obwohl, ich glaube, Sie sollten eine div.item mit ng-repeat in Ihrem .list haben können. Und in der div.item sollten Sie in der Lage sein, zu haben, was auch immer Sie wollen (nicht sicher, wie ionic1 damit umgeht)