自己定义一个tab指令
定义一个tab切换的指令:
指令的文件结构:
Js/directives/tab
tab.html
tab.js
tab.html:
<style>
.my-li-style{
line-height: 30px;
margin-right: 10px;
border-radius: 3px;
height:30px;
cursor: pointer;
}
.tabactive{
color: #fff;
background:#f48a36;
}
</style>
<div class="amdin-nav">
<ul class="list-inline adminAction-listHeader">
<li class="my-li-style" ng-repeat="tab in tab_list"
ng-click="tab_click(tab.state)"
ng-class={tabactive:current_state==tab.state}
ui-sref="{{tab.state}}">{{tab.name}}</li>
</ul>
</div>
Tab.js:
define(["app"],function(myapp){
myapp.directive('mytab',["$state",function($state){
return {
scope:{
data:"="
},
templateUrl:'js/directives/tab/tab.html',
link:function(s,ele,attrs){
s.current_state=$state.current.name;//初始化(获得当前的路由状态)
s.tab_click=function(cstate){//每次触发此事件,就传递过来状态值
s.current_state=cstate;
}
s.$watch("data",function(n_data){//监听值的改变
s.tab_list=n_data;
})
}
};
}]);
});
控制器:
//创意界面的权限控制器
define(["app",'services/zct_get_my_right','directives/tab/tab'], function (myapp) {
myapp.controller('ideas_first_ctrl',
['$scope','$rootScope','$state','get_my_right', function (s,rs,$state,getRight) {
var my_right=getRight.get_right(localStorage.permission);
s.idea_tab=[
{name:"全部创意",state:"home.ideas.allIdeas"},
{name:"我的创意",state:"home.ideas.myIdeas"},
];
}])
});
Html:
<div class="ideas-list">
<div class="my-row"> <mytab data="idea_tab"></mytab> <div class=" list-content" ui-view="part" ></div>
</div>
</div>
自己定义一个tab指令的更多相关文章
- angular.js的ng-app 指令定义一个 AngularJS 应用程序。
<!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UT ...
- 用CIL写程序:定义一个叫“慕容小匹夫”的类
前文回顾: <用CIL写程序:你好,沃尔德> <用CIL写程序:写个函数做加法> 前言: 今天是乙未羊年的第一天,小匹夫先在这里给各位看官拜个年了.不知道各位看官是否和匹夫一样 ...
- ConstraintLayout+radioGroup做一个tab.简单好用。
主页tab是必须会有的,各种实现也很多.各有千秋.但目标都是简单.可控.今天用ConstraintLayout+radioGroup做一个tab.简单性可控性都还可以.本文目的把ConstraintL ...
- 19 Flutter 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局(27分36秒)
Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. t ...
- AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换
一.Flutter AppBar 自定义顶部按钮图标.颜色 leading 在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title 标题,通常显示为当 ...
- java怎么定义一个二维数组?
java中使用 [][] 来定义二维数组 定义数组时也可同时初始化下面是一些例子float[][] numthree; //定义一个float类型的2维数组numthree=new float[5][ ...
- 将对象的所有属性名放到一个数组中 || 获得对象的所有属性名 || return;不具有原子性 || 怎样自己制作异常|| 判断对象有没有某个属性 || 当传递的参数比需要的参数少的时候,没有的值会被赋予undefined || 获得函数实际传递的参数 || 怎么用函数处理一个对象 || 用一个名字空间定义一个模块所有的函数 || 给一个对象添加方法
获得对象的所有属性名 || 将对象o的所有属性名放到数组中 var o = {x:1,y:2,z:3}; var arr = []; var i = 0; for(arr[i++] in o){};/ ...
- HTML5移动Web开发(六)——定义一个内容策略
通过分析工具搜集到的数据,你可以定义一个内容策略,这对已经有了一个桌面网站的人是非常有用的. 1.确认你已经把分析工具的Javascript代码嵌入到网站中.(http://www.cnblogs.c ...
- 如何去定义一个jquery插件
扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方 ...
随机推荐
- table 转实体
public class Table2Entity<T> where T : class,new() { public static List<T> GetEntitys(Da ...
- 解决spring boot在RabbitMQ堆积消息情况下无法启动问题
最近遇到一个问题,服务站点上线之前,先去新建需要的rabbitmq并绑定关系,此时 如果发送消息方运行, 那边会造成新建的q消息部分堆积得不到及时消费 那么问题来了? 在消息堆积情况下,服务站点无法启 ...
- CodeForces 297A Parity Game (脑补题)
题意 一个01串,可以有两种操作:①在末尾添加parity(a):②删除开头的一个字符.其中parity(a),当串中1的个数为奇数时为1,偶数时为0.问某个01串是否可以通过若干操作变成另一个01串 ...
- STL学习笔记(转,还是比较全的)
STL简介 1 概况 2 1.1 STL是什么 2 1.2 为什么我们需要学习STL 2 1.3 初识STL 2 1.4 STL 的组成 5 2 容器 6 2.1 基本容器——向量(vector) 6 ...
- Ansible 小手册系列 十七(特性模块)
异步操作和轮询 --- # Requires ansible 1.8+ - name: 'YUM - fire and forget task' yum: name=docker-io state=i ...
- 转载:left join和left semi join的联系和区别
1.联系 他们都是 hive join 方式的一种,join on 属于 common join(shuffle join/reduce join),而 left semi join 则属于 map ...
- 【zzuli-1923】表达式求值
题目描述 假设表达式定义为:1. 一个十进制的正整数 X 是一个表达式.2. 如果 X 和 Y 是 表达式,则 X+Y, X*Y 也是表达式; *优先级高于+.3. 如果 X 和 Y 是 表达式,则 ...
- AES前后端加密
1.前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- linux安装mysql5.7.24
一.卸载 mysql安装有三种方式,包括二进制包安装(Using Generic Binaries).RPM包安装.源码安装.一般是前两种比较多 卸载方法参考Linux->卸载Mysql方法总结 ...
- Javascript-- jQuery动画篇(淡入淡出效果)
淡入淡出效果 jQuery 提供了下面几种方法可以实现显示的淡入淡出效果: fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn()方法 fadeIn()实现 ...