脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS实现标签页的两种方式

AngularJS实现标签页的两种方式

 更新时间：2016年09月05日 14:59:55   作者：MakingChoice  
这篇文章分别给大家介绍了AngularJS实现标签页的两种方式，一种是通过普通指令实现标签页，另外一种是通过自定义指令实现的标签页，有需要的朋友们可以来参考借鉴，下面来一起看看吧。

一、通过普通指令实现标签页

<link rel="stylesheet" href="views/show/tab.css"/>
<div>
 <ul class="nav nav-tabs" ng-init="vm.activeTab=1">
 <li ng-class="{active: vm.activeTab == 1}"><a href="javascript:;" ng-click="vm.activeTab = 1">标签1</a></li>
 <li ng-class="{active: vm.activeTab == 2}"><a href="javascript:;" ng-click="vm.activeTab = 2">标签2</a></li>
 </ul>
 <div class="tab-content tab-bordered">
 <div class="tab-panel" ng-show="vm.activeTab == 1">
 标签1的内容
 </div>
 <div class="tab-panel" ng-show="vm.activeTab == 2">
 标签2的内容
 </div>
 </div>
</div>

<h3>说明</h3>
这里演示的是直接通过bootstrap实现的方法。
<hr/>还可以通过angular-bootstrap的tabset指令实现，参见 <a href="http://angular-ui.github.io/bootstrap/#/tabs" target="_blank">官方Demo</a>


'use strict';

angular.module('ngShowcaseApp').controller('ctrl.show.tab', function ($scope) {
 var vm = $scope.vm = {};
});


.tab-content.tab-bordered {
 border: 1px solid lightgray;
 border-top: none;
 padding: 15px;
 border-radius: 0 0 4px 4px;
}

二、自定义指令实现的标签页

<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
 <meta charset="UTF-8">
 <title></title>
 <script src="lib/angular.min.js" type="text/javascript"></script>
 <script src="lib/angular-route.js" type="text/javascript"></script>
 <script src="lib/jquery-2.1.4.min.js"></script>
 <script src="lib/bootstrap.js" type="text/javascript"></script>
 <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
 <style>
 .btn-group{
  position: relative;
  left: 40px;
 }
 .list-group{
  position: relative;
  left: 0;
 }

 .list-group-item{

 }
 #list3{
  width: 200px;
 }
 </style>
</head>
<body >

 <div ng-controller="directiveControl">
 <div style="width: 100px;height: 100px;border: 1px solid blue" ng-class="{'hidden':value}" ></div>
 <div>
  <list ng-model="value" ></list>
 </div>
 <script type="text/ng-template" id="list.html">
  <div >
  <div class="btn-group">
   <ul class="nav nav-tabs">
   <li role="presentation" ng-mouseover="flag=3" ng-mouseleave="flag=4"><a href="#" >{{name}}</a></li>
   </ul>
  </div>
  <div class="list-group" id="list3" ng-show="flag==3" ng-mouseover="flag=3" ng-mouseleave="flag=4">
   <ul >
   <li class="list-group-item " ng-click="fun1()"><a href="#">Action</a></li>
   <li class="list-group-item "><a href="#">Another action</a></li>
   <li class="list-group-item "><a href="#">Something else here</a></li>
   <li class="list-group-item "><a href="#">Separated link</a></li>
   </ul>
  </div>
  </div>
 </script>
 </div>

</body>
<script>
 var demo=angular.module("demo",[]);
 demo.controller("directiveControl", function ($scope) {

 });
 demo.directive("list",[function () {
 return {
  restrict:'EA',
  templateUrl:'list.html',
  scope:{
  value:'=ngModel'
  },

  link: function (scope,element,attr) {
  scope.name="home";
  scope.lists=[{name:'home'},{name:'family '}];
  scope.fun1= function () {
   scope.value=true;
   console.log("a")
  }
  }
 }
 }])
</script>
</html>

（1）首先要解决指令必须写在一个根标签中，一定要用div包裹
（2）指令外部传递参数要使用ng-model，来声明变量，
         在指令中用scope：{
         value:'ngModel'
         }来赋值

总结

以上就是关于AngularJS实现标签页的全部内容，希望这篇文章对大家学习或使用AngularJs能有所帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

相关文章

  • 在Angular测试中使用spy的教程详解

    在Angular测试中使用spy的教程详解

    spy 是一种检查函数是否被调用或提供自定义返回值的方法,我们可以使用spy 来测试依赖于服务的组件,并避免实际调用服务的方法来获取值,在本文中,您将学习如何在 Angular 项目中使用 Jasmine spy,需要的朋友可以参考下
    2024-03-03
  • AngularJS框架的ng-app指令与自动加载实现方法分析

    AngularJS框架的ng-app指令与自动加载实现方法分析

    这篇文章主要介绍了AngularJS框架的ng-app指令与自动加载实现方法,结合实例形式分析了ng-app指令的功能及自动加载机制的实现技巧,需要的朋友可以参考下
    2017-01-01
  • AngularJS自定义插件实现网站用户引导功能示例

    AngularJS自定义插件实现网站用户引导功能示例

    这篇文章主要介绍了AngularJS自定义插件实现网站用户引导功能,结合实例形式分析了AngularJS自定义插件的实现步骤与相关功能技巧,需要的朋友可以参考下
    2016-11-11
  • 详解基于angular路由的requireJs按需加载js

    详解基于angular路由的requireJs按需加载js

    本篇文章主要介绍了详解基于angular路由的requireJs按需加载js，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • 详解Angular组件之生命周期(二)

    详解Angular组件之生命周期(二)

    Angular本身监督所有Angular组件和指令的生命周期 。为了在开发应用程序时顺利进行，您必须了解结果的生命周期。组件是任何Angular应用程序的主要构建块。因此，必须了解它们才能理解组件生命周期的处理步骤。只有这样才能在应用程序的开发中实现。
    2021-05-05
  • AngularJS 使用$sce控制代码安全检查

    AngularJS 使用$sce控制代码安全检查

    SCE，即strict contextual escaping,我的理解是 严格的上下文隔离 ...翻译的可能不准确，但是通过字面理解，应该是angularjs严格的控制上下文访问，通过本文给大家介绍AngularJS 使用$sce控制代码安全检查，对angularjs sce相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • Angular.js实现多个checkbox只能选择一个的方法示例

    Angular.js实现多个checkbox只能选择一个的方法示例

    这篇文章主要给大家介绍了利用Angular.js实现多个checkbox只能选择一个的方法，文中给出了详细的示例代码，相信对大家具有一定的参考价值，下面来一起看看吧。
    2017-02-02
  • angular项目中bootstrap-datetimepicker时间插件的使用示例

    angular项目中bootstrap-datetimepicker时间插件的使用示例

    这篇文章主要介绍了angular项目中bootstrap-datetimepicker时间插件的使用示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 详解angular element()方法使用

    详解angular element()方法使用

    本篇文章主要介绍了详解angular element()方法使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • AngularJS使用ng-inlude指令加载页面失败的原因与解决方法

    AngularJS使用ng-inlude指令加载页面失败的原因与解决方法

    这篇文章主要介绍了AngularJS使用ng-inlude指令加载页面失败的原因与解决方法,对比不同浏览器错误提示分析了加载失败的原因及通过http访问的解决方法,需要的朋友可以参考下
    2017-01-01

最新评论