我有一个网站页脚:
<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">© 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.
我非常不清楚如何着手实现。
最佳答案
我会让我的指令接受三个值:
<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/
关于javascript - 对多个选项使用 Angular 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40226978/