Лучший способ оптимизировать этот вид?

Question

У меня есть рабочий просмотр, я бы хотел его оптимизировать. В настоящее время это сложно. Дело в том, что я не знаю, как это сделать.

Использование функции в контроллере? Создание директивы?

На самом деле основная оптимизация, которая может быть выполнена, исходит из ссылок. Я использую ui.router, и у меня есть 2 состояния: deal.list и deals.list.selected. Для каждой ссылки на страницы, PARAMS зависит от:

1. если сделка выбран
2. что текущая категория узла, и если у нас есть один выбран, добавьте полный путь пробкового THT может быть от 1 до 3 Foldes ,

Это делает все ссылки немного compliated с большим количеством нг-если ...

<div> 
    <div class="column" style="width:30%;"> 
     <div ng-if="!vm.defaultNode"> 
      Affiner par catégorie parent 
      <div ng-if="vm.deal"> 
       <a ng-if="vm.nodeTree.ancestors[0]" 
        ui-sref="deals.list.selected({ 
         dealId:vm.deal.id, 
         nodeId:vm.nodeTree.ancestors[0].id, 
         nodeSlug1:vm.nodeTree.ancestors[0].slug, 
         nodeSlug2:null})">{{ node.title }}</a> 
       <a ng-if="vm.nodeTree.ancestors[1]" 
        ui-sref="deals.list.selected({ 
         dealId:vm.deal.id, 
         nodeId:vm.nodeTree.ancestors[0].id, 
         nodeSlug1:vm.nodeTree.ancestors[0].slug, 
         nodeSlug2:vm.nodeTree.ancestors[1].slug, 
         nodeSlug3:null})">{{ node.title }}</a> 
       <a ng-if="vm.nodeTree.ancestors[2]" 
        ui-sref="deals.list.selected({ 
         dealId:vm.deal.id, 
         nodeId:vm.nodeTree.ancestors[0].id, 
         nodeSlug1:vm.nodeTree.ancestors[0].slug, 
         nodeSlug2:vm.nodeTree.ancestors[1].slug, 
         nodeSlug3:vm.nodeTree.ancestors[2].slug})">{{ node.title }}</a> 
      </div> 
      <ul ng-if="!vm.deal"> 
       <li ng-repeat="(key, node) in vm.nodes.data"> 
        <a ui-sref="deals.list({nodeId:node.id,nodeSlug1:node.slug})">{{ node.title }}</a> 
       </li> 
      </ul> 
     </div> 

     <div ng-if="!vm.deal"> 
      <a ng-if="vm.nodeTree.ancestors[0]" 
       ui-sref="deals.list({ 
      nodeId:vm.nodeTree.ancestors[0].id, 
      nodeSlug1:vm.nodeTree.ancestors[0].slug, 
      nodeSlug2:null})">{{ vm.nodeTree.ancestors[0].title }}</a> 
      <a ng-if="vm.nodeTree.ancestors[1]" 
       ui-sref="deals.list({ 
      nodeId:vm.nodeTree.ancestors[0].id, 
      nodeSlug1:vm.nodeTree.ancestors[0].slug, 
      nodeSlug2:vm.nodeTree.ancestors[1].slug, 
      nodeSlug3:null})">{{ vm.nodeTree.ancestors[1].title }}</a> 
      <a ng-if="vm.nodeTree.ancestors[2]" 
       ui-sref="deals.list({ 
      nodeId:vm.nodeTree.ancestors[0].id, 
      nodeSlug1:vm.nodeTree.ancestors[0].slug, 
      nodeSlug2:vm.nodeTree.ancestors[1].slug, 
      nodeSlug3:vm.nodeTree.ancestors[2].slug})">{{ vm.nodeTree.ancestors[2].title }}</a> 
     </div> 
     <div>{{vm.nodeTree.title}}</div> 

    </div> 

    <div class="column"> 
     <select ng-model="vm.order" ng-init="vm.order=vm.defaultOrder" ng-change="vm.changeOrderTo(vm.order)"> 
      <option value="hottest">order by: hottest</option> 
      <option value="newest">order by: newest</option> 
     </select> 

     <ul> 
      <li ng-repeat="deal in vm.deals.data"> 
       <a ng-if="!vm.nodeTree.ancestors[0]" 
        ui-sref="deals.list.selected({ 
         dealId:deal.id, 
         nodeId:vm.nodeTree.id, 
         nodeSlug1:vm.nodeTree.slug})">{{ deal.title }}</a> 
       <a ng-if="vm.nodeTree.ancestors[0]" 
        ui-sref="deals.list.selected({ 
         dealId:deal.id, 
         nodeId:vm.nodeTree.id, 
         nodeSlug1:vm.nodeTree.ancestors[0].slug, 
         nodeSlug2:vm.nodeTree.slug})">{{ deal.title }}</a> 
       <a ng-if="vm.nodeTree.ancestors[1]" 
        ui-sref="deals.list.selected({ 
         dealId:deal.id, 
         nodeId:vm.nodeTree.id, 
         nodeSlug1:vm.nodeTree.ancestors[0].slug, 
         nodeSlug2:vm.nodeTree.ancestors[1].slug, 
         nodeSlug3:vm.nodeTree.slug})">{{ deal.title }}</a> 
       <a ng-if="vm.nodeTree.ancestors[2]" 
        ui-sref="deals.list.selected({ 
         dealId:deal.id, 
         nodeId:vm.nodeTree.id, 
         nodeSlug1:vm.nodeTree.ancestors[0].slug, 
         nodeSlug2:vm.nodeTree.ancestors[1].slug, 
         nodeSlug3:vm.nodeTree.ancestors[2].slug})">{{ deal.title }}</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

Там нет правильного или неправильного ответа, но так как у вас есть шаблон HTML участие я бы направить в сторону директивы. Однако, если бы я делал это, я бы использовал его в Angular, используя Googles Polymer. Теперь Polymer делает тёмную DOM доступной. Мысль похожа на угловую директиву, позволяющую шаблонный HTML-шаблон. Стоит посмотреть. Преимущество над директивой заключается в том, что вы не получаете файл контроллера, файл шаблона и файл css, но можете полностью его выбросить в одно скрытое решение DOM.