[英]Why my directive is not showing up?
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 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 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 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 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;
}
}
};
});
The working Plunkr link: http://plnkr.co/edit/D6HBIekwmJUsuYZQSPxI?p=preview 有效的Plunkr链接: http ://plnkr.co/edit/D6HBIekwmJUsuYZQSPxI?p=preview
Also, your compiled CSS doesn't seem to work. 此外,您编译的CSS似乎无法正常工作。 I copied the exact LESS styles and it's working perfectly fine.
我复制了准确的LESS样式,并且效果很好。
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>
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
类绑定到了隔离范围的visible
属性,该属性绑定到了控制器范围内的visible
属性。
Your buttons work on the visibleLeft
and visibleRight
scope properties but nothing sets the visible
property. 您的按钮可在
visibleLeft
和visibleRight
范围属性上工作,但没有任何设置visible
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.