當前位置：
首頁 >
Angular1.x入门级自定义组件（导航条）
發布時間：2023/11/27
39
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Angular1.x入门级自定义组件（导航条）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
<!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;
}總結
以上是生活随笔為你收集整理的Angular1.x入门级自定义组件（导航条）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Angular1.x的自定义指令dire
- 下一篇： 2020考研 管理类联考综合能力-写作