我正在关注this tutorial构建一个简单的侧边栏。除了一些 Controller /应用程序名称之外，我遵循确切的步骤和代码。我没看出有什么问题。然而它没有出现。谁能指点我一下吗？请参阅带有完整代码的 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();
});
}
});
样式.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;
}
指令.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;
}
}
};
});
最佳答案
工作 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>
关于javascript - 为什么我的指令没有显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33728114/