<!DOCTYPE html>
<html lang="zh" ng-app="app">
<head>
<meta charset="UTF-8">
<title>百度导航条</title>
<script src="../angular.js"></script>
<link rel="stylesheet" href="myComponent.css">
<script src="myComponent.js"></script>
</head>
<body>
<my-component menu="网页|资讯|视频|图片|知道|文库|贴吧|采购|地图|更多»"></my-component>
</body>
</html>
var app = angular.module('app', []);
app.directive('myComponent', function () {
return {
templateUrl: 'myComponent.html',
controller: 'controllerName',
};
});
app.run(["$templateCache", function ($templateCache) {
$templateCache.put("myComponent.html", "<div class='baidu-nav'><li ng-repeat='item in list'>{{item}}</li></div>");
}]);
app.controller('controllerName', function ($scope, $attrs) {
$scope.list = $attrs.menu.split("|");
});
@charset "UTF-8";
/*这里设置组件的样式*/
.baidu-nav {
width: 100%;
background: #f8f8f8;
line-height: 36px;
height: 38px;
}
li {
cursor: pointer;
list-style: none;
float: left;
width: 54px;
height: 38px;
display: inline-block;
text-decoration: none;
text-align: center;
color: #666;
font-size: 14px;
}
li:hover, li.active {
border-bottom: 2px solid #38f;
font-weight: 700;
color: #323232;
}
