2
Я следую за 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;
}
}
};
});
Вы можете предоставить plunkr? –
Вот ваш текущий код в Plunker ~ http://plnkr.co/edit/fbqPVHFD3DH4rZVSRm5E?p=preview – Phil
Спасибо @Phil. В следующий раз я оберну их в онлайн-инструмент, например, jsfiddle или Plunker. – catlovespurple