Question

我正在关注this tutorial以构建一个简单的侧边栏。我遵循一些控制器/应用程序名称以外的确切步骤和代码。我没有看到任何错误。然而，它没有出现。有人能指出我吗？查看带有完整代码的plunker链接的评论......

html代码：

<!DOCTYPE html>
<html ng-app="sideBarApp">

<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="directive.js"></script>
    <script src="controller.js"></script>
</head>

<body ng-controller="sidebar">

    <button ng-click="showLeft($event)">Show left Menu!</button>
    <button ng-click="showRight($event)">Show Right Menu!</button>

    <menu visible="visible" alignment="left">
        <menu-item hash="first-page">First Page></menu-item>
        <menu-item hash="second-page">Second Page></menu-item>
        <menu-item hash="third-page">Third Page></menu-item>
    </menu>


</body>

</html>

app.js

var app = angular.module('sideBarApp', []);

app.run(function ($rootScope) {
    document.addEventListener("keyup", function (e) {
        if (e.keyCode == '27') {
            $rootScope.$broadcast("escapePressed", e.target);
        }
    });

    document.addEventListener("click", function (e) {
        $rootScope.$broadcast("documentClicked", e.target);
    })
});

controller.js

app.controller("sidebar", function ($scope, $rootScope) {
    $scope.leftVisible = false;
    $scope.rightVisible = false;

    $scope.close = function () {
        $scope.leftVisible = false;
        $scope.rightVisible = false;
    };

    $scope.showLeft = function (e) {
        $scope.leftVisible = true;
        e.stopPropagation();
    };

    $scope.showRight = function (e) {
        $scope.rightVisible = true;
        e.stopPropagation();
    }

    $rootScope.$on("documentClicked", _close);
    $rootScope.$on("escapePressed", _close);

    function _close() {
        $scope.$apply(function () {
            $scope.close();
        });
    }
});

的style.css

.border-box {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

menu {
    display: block;
}

menu > div {
    position: absolute;
    z-index: 2;
    top: 0;
    width: 250px;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-transition: -webkit-transform ease 250ms;
    -moz-transition: -webkit-transform ease 250ms;
    -ms-transition: -webkit-transform ease 250ms;
    -o-transition: -webkit-transform ease 250ms;
    transition: -webkit-transform ease 250ms;
    -webkit-transition: transform ease 250ms;
    -moz-transition: transform ease 250ms;
    -ms-transition: transform ease 250ms;
    -o-transition: transform ease 250ms;
    transition: transform ease 250ms;
}

menu > div.left {
    background: #273D7A;
    left: -250px;
}

menu > div.show.left {
    transform: translate3d(250px, 0, 0);
    -ms-transform: translate3d(250px, 0, 0);
    -webkit-transform: translate3d(250px, 0, 0);
    -o-transform: translate3d(250px, 0, 0);
    -moz-transform: translate3d(250px, 0, 0);
}

menu > div.right {
    background: #6B1919;
    right: -250px;
}

menu > div.show.right {
    transform: translate3d(-250px, 0, 0);
    -ms-transform: translate3d(-250px, 0, 0);
    -webkit-transform: translate3d(-250px, 0, 0);
    -o-transform: translate3d(-250px, 0, 0);
    -moz-transform: translate3d(-250px, 0, 0);
}

menu > div > menu-item {
    display: block;
}

menu > div > menu-item > div {
    float: left;
    width: 100%;
    margin: 0;
    padding: 10px 15px;
    border-bottom: solid 1px #555;
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: #B0B0B0;
}

menu > div > menu-item > div:hover {
    color: #F0F0F0;
}

menu > div > menu-item > div > span {
    float: left;
    color: inherit;
}

directive.js

app.directive("menu", function () {
    return {
        restrict: "E",
        template: "<div ng-class='{ show: visible, left: alignment === \"left\", right: alignment === \"right\" }' ng-transclude></div>",
        transclude: true,
        scope: {
            visible: "=",
            alignment: "@"
        }
    };
});

    app.directive("menuItem", function () {
        return {
            restrict: "E",
            template: "<div ng-click='navigate()' ng-transclude></div>",
            transclude: true,
            scope: {
                hash: "@"
            },
            link: function ($scope) {
                $scope.navigate = function () {
                    window.location.hash = $scope.hash;
                  }
            }
        };
    });

Answer 1

正在使用的Plunkr链接：http://plnkr.co/edit/D6HBIekwmJUsuYZQSPxI?p=preview

此外，您编译的CSS似乎不起作用。我复制了精确的LESS样式，它的工作非常好。

这是您修改后的HTML文件

<!DOCTYPE html>
<html ng-app="sideBarApp">

<head>
    <style type="text/less">
            .transition (@value1,@value2:X,...) { @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; -webkit-transition: @value; -moz-transition: @value; -ms-transition: @value; -o-transition: @value; transition: @value; }
            .transform (@value1,@value2:X,...) { @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; transform:@value; -ms-transform:@value; -webkit-transform:@value; -o-transform:@value; -moz-transform:@value; }
            .border-box { box-sizing:border-box; -moz-box-sizing:border-box; }

            body { font-family:Arial; font-size:14px; }
            body>span, body>h1 { float:left; width:100%; margin:0; padding:0; margin-bottom:10px; }

            span { color:#888888; }
            button { width:auto; padding:7px 22px; }

            menu { display:block;
                @menu-width:250px;
                >div { position:absolute; z-index:2; top:0;  width:@menu-width; height:100%; .border-box; .transition(-webkit-transform ease 250ms); .transition(transform ease 250ms);
                    &.left { background:#273D7A; left:@menu-width*-1; }
                    &.show.left { .transform(translate3d(@menu-width, 0, 0)); }

                    &.right { background:#6B1919; right:@menu-width*-1; }
                    &.show.right { .transform(translate3d(@menu-width*-1, 0, 0)); }

                    >menu-item { display:block;
                        >div { float:left; width:100%; margin:0; padding:10px 15px; border-bottom:solid 1px #555; cursor:pointer; .border-box; color:#B0B0B0;
                            &:hover { color:#F0F0F0; }
                            >span { float:left; color:inherit; }
                        }
                    }
                }
            }
        </style>

    <script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js"></script>
    <script src="app.js"></script>
    <script src="directive.js"></script>
    <script src="controller.js"></script>
</head>

<body ng-controller="sidebar">

    <button ng-click="showLeft($event)">Show left Menu!</button>
    <button ng-click="showRight($event)">Show Right Menu!</button>

    <menu visible="leftVisible" alignment="left">
            <menu-item hash="first-page">First Page</menu-item>
            <menu-item hash="second-page">Second Page</menu-item>
            <menu-item hash="third-page">Third Page</menu-item>
        </menu>

        <menu visible="rightVisible" alignment="right">
            <menu-item hash="first-page">First Page</menu-item>
            <menu-item hash="second-page">Second Page</menu-item>
            <menu-item hash="third-page">Third Page</menu-item>
        </menu>


</body>

</html>

Answer 2

很简单，您已将菜单的show类绑定到隔离范围的visible属性，该属性绑定到控制器范围内的visible属性。

您的按钮适用于visibleLeft和visibleRight范围属性，但没有设置visible属性。

为什么我的指令没有出现？

2 个答案: