私は、サイトのフッターを持って

Question

複数のオプションのための角度指令を使用する：

<footer> 
    <div class="container"> 
    <div class="contents"> 
     <div class="logo-copyright"> 
     <div class="footer-logo"> 
      <i class="footer-logo gradient"></i></a> 
     </div> 
     <div class="copyright">&copy; 2016 A Company, Inc.</div> 
     </div> 
     <div class="footer-terms"><a href="">Terms of use</a></div> 
     <div class="footer-legal"><a href="">Legal Info</a></div> 
     <div class="footer-contact"><a href="">Contact Us</a></div> 
    </div> 
    </div> 
</footer> 

それは私が知っている<my-footer></my-footer>

ようなものとして使用することができますので、私はこのディレクティブで入れたいどのように "私の問題は、このフッターの一部がアプリケーションによっては必要ないかもしれないということです。すべての人にlogo-copyrightが必要ですが、その3つの兄弟が必要かどうか。

私は何を探していますが、たとえば、必要に応じてそれぞれのdiv Sを示すだろうオプションでディレクティブを使用する方法です：

<my-footer options="terms legal"></my-footer>

は2つのdiv footer-termsとfooter-legalでHTMLを表示していましたしかしないfooter-contact、

<my-footer></my-footer>

のみとフッターのHTMLを示すであろう一方、 logo-copyright divを省略し、他の2を省略します。

これを実行する方法については非常に不明です。私は私のディレクティブは三つの値受け入れる必要があります

Answer 1

：

<my-footer terms legal contact></my-footer> 

そして、以下は私の指示の定義だろう、私はscope上attrsを使用します。

.directive('myFooter', function() { 
    return { 
     restrict: 'E', 
     scope: false 
     templateUrl: '/partials/footer.html', 
     replace: true, 
     link: function (scope, element, attrs) { 
      scope.terms = typeof attrs.terms != 'undefined'; 
      scope.legal = typeof attrs.legal != 'undefined'; 
      scope.contact = typeof attrs.contact != 'undefined'; 
     } 
    } 
}) 

これにより、必要なコンポーネント/テンプレートセクションをロードするだけで、HTML部分がきれいになります。

<my-footer terms legal></my-footer> 

terms and legalセクションのみがロードされます。 https://jsfiddle.net/spechackers/wakajwzt/