javascript - 对多个选项使用 Angular 指令

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每个人都需要，它的三个 sibling 可能需要也可能不需要。

我正在寻找的是一种使用带有选项的指令的方法，这些选项将显示相应的 div s 根据需要例如:

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

将显示带有 2 个 div 的 html footer-terms和 footer-legal但不是 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 和 legal 部分。

这是一个相同的 fiddle : https://jsfiddle.net/spechackers/wakajwzt/