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，但可能需要或不需要它的三个兄弟姐妹。

我正在寻找的是一种使用该指令的方法，该指令可根据需要显示相应的div，例如：

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

会显示带有2个div footer-terms和footer-legal但不会显示footer-contact的html，而

<my-footer></my-footer>

会显示仅包含所需logo-copyright div的页脚html，并省略其他2。

我很清楚如何继续实施这个目标。

Answer 1

我的指令会接受三个值：

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

下面是我的指令定义，我会attrs使用scope。

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

使用Angular Directive进行多种选择

1 个答案: