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

I am following this tutorial to build a simple sidebar. I follow the exact steps and code except for some controller/app names. I didn't see anything wrong with it. However it doesn't show up. Can anyone point me out? See the comment for a plunker link with full code...

我正在跟随本教程构建一个简单的边栏。除了一些控制器/应用程序名之外，我遵循的是确切的步骤和代码。我看不出有什么问题。但是它没有出现。谁能指出我来吗?查看带有完整代码的柱塞链接的注释…

html code:

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;
                  }
            }
        };
    });

2 个解决方案

#1

The working Plunkr link: http://plnkr.co/edit/D6HBIekwmJUsuYZQSPxI?p=preview

工作柱塞链接:http://plnkr.co/edit/d6hbiekwjusuyzqspxi?

Also, your compiled CSS doesn't seem to work. I copied the exact LESS styles and it's working perfectly fine.

而且，编译后的CSS似乎也不能工作。我复制了更少的样式，效果很好。

Here is your modified HTML file,

这是修改后的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>

#2

Quite simply, you've bound your menu's show class to the isolate scope's visible property which is bound to the visible property in your controller's scope.

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

Your buttons work on the visibleLeft and visibleRight scope properties but nothing sets the visible property.

您的按钮在visibleLeft和visibleRight范围属性上工作，但没有设置可见属性。

#1