自己定义一个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实例添加一个方 ...
随机推荐
- android面试准备一之Activity相关
1.Activity生命周期 1.1 Activity的4种状态 running/paused/stopped/killed running:当前Activity正处于运行状态,指的是当前Ac ...
- 原生javascript-日期年,月,日联动选择
在线例子:http://lgy.1zwq.com/dateSwitch/ 月份的判定,由于涉及到过多了判定条件,如果用if else会大大降低性能,建议用switch 语法 getDays:funct ...
- Jdev 本地RUN页面时候,将异常直接显示出来,而不是乱码
本地运行页面时,经常会遇到以下错误 oracle.jbo.JboException: JBO-29000: JBO-29000: JBO-26028: ???? MemberAttributesDis ...
- es6 nodejs compose
const compose = (...fns) => { let len = fns.length; let fn_index = len - 1; let fn_result; functi ...
- css布局(转载)
单列布局 水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素 ...
- 【LeetCode-128】Longest Consecutive Sequence
描述 输入一个乱序的连续数列,输出其中最长连续数列长度,要求算法复杂度为 O(n) . 输入 54,55,300,12,56 输出 3 通常我们看有没有连续序列时 找某个数有没有的前后的数,比如看到5 ...
- 设置tableview 右侧 索引字体的大小
- 201621123006 《Java程序设计》第2周学习总结
1. 本周学习总结 以几个关键词描述本周的学习内容.并将关键词之间的联系描述或绘制出来. 原则:少而精,自己写.即使不超过5行也可,但请一定不要简单的复制粘贴. java数据类型:java数据类型分为 ...
- 第1课:接口测试和jmeter总结
接口测试 1. 接口的分类:webService和http api接口 1) webService接口:是按照soap协议通过http传输,请求报文和返回报文都是xml格式,一般要借助工具来测试接口: ...
- 使用 create-react-app 构建 react应用程序
原文 http://blog.csdn.net/github_squad/article/details/57452333#