Previous Entry Share Next Entry
Выпадающее меню с Angular.js
and_cesbo
Компоненты: Bootstrap (только css, без js), Angular.js

<style type="text/css">
.dropdown { display: none; position: absolute; z-index: 9000; }
.dropdown.dropdown-menu { top: auto; left: auto; }
.dropdown.open { display: inherit; }
</style>

<div dropdown>
    <button class="btn btn-default dropdown-open">Open</button>
    <ul class="dropdown dropdown-menu">
        <li><a ng-click="">Item #1</a></li>
        <li><a ng-click="">Item #2</a></li>
        <li><a ng-click="">Item #3</a></li>
    </ul>
</div>

<script type="text/javascript">
App.directive("dropdown", function() {
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            var m = angular.element(element.findClass("dropdown")[0]);
            var t = angular.element(element.findClass("dropdown-open")[0]);
            var b = angular.element(document.getElementsByTagName("body"));
            t.on("click", function(e) {
                console.log("click!");
                var c = function(e) {
                    if(m.hasClass("open")) {
                        m.removeClass("open");
                        t.removeClass("active");
                        b.unbind("click", c);
                    } else {
                        m.addClass("open");
                        t.addClass("active");
                    }
                }
                if(!m.hasClass("open"))
                    b.bind("click", c);
            });
        }
    };
});
</script>

?

Log in