コンテンツの動的な変更がより効果的です。 AngularJS 1.6

Question

バナーの情報を提供するRESTサービスがあります。私はこの情報をメインページのスライダーの動的変更に使用したいと思います。

私は単純に$ http.getを使ってデータを取得し、補間を行い、いくつかの追加のng-ifを使って特定のデータがあるかどうかをチェックしたり、いくつかの要素を表示したりします。

<div class="main-block" ng-if="locale==='ru'"> 
      <div ng-repeat="slider in restData.result" ng-class="{'active':$first}" class="slide {{ slider.location }}" ng-style="{'background-image':'url({{ slider.url.url }})'}"> 

       <div class="content-block"> 

        <div class="container"> 
         <div class="right-block"> 
          <h2>{{ slider.text1 }}</h2> 
         </div> 
         <div class="clearfix"></div> 
         <div ng-if="slider.text2 || slider.text3 || slider.text4 || slider.text5" class="offer-block" ng-style="{'background':'rgba({{ slider.color }},0.6)'}"> 
          <div class="offer-block__country">{{ slider.text2 }}</div> 
          <div class="offer-block__name"> 
           {{ slider.text3 }} 
          </div> 
          <div class="offer-block__days"> 
           {{ slider.text4 }} 
          </div> 
          <div class="offer-block__date"> 
           {{ slider.text5 }} 
          </div> 
         </div> 
         <div class="clearfix"></div> 
         <a ng-if="slider.link" ui-sref="shell.tourShow({url:'{{ slider.link }}'})" class="orange-btn"> 
          Подробнее 
         </a> 
        </div> 
       </div> 
      </div> 
     </div> 

しかし、私はそのようなタイプのデータ操作で作業するにはより良い方法が必要であると感じています。あなたはそれを見つけるために手伝ってください、または少し良い例を挙げて、それをより良くする方法を教えてください。

Answer 1

それはすでに、私は変化するであろう唯一のことは、直接ディレクティブを作成し、ディレクティブのテンプレートにあなたのhtmlを分離ng-repeat="slider in restData.result"

にマップするのではなく

$scope.sliders = {}; 

// in rest request update the local variable with most recent data 
// and then use ng-repeat="slider in sliders"