Creating Directives that Communicate
<my-tabs>
<my-pane title="Hello">
<h4>Hello</h4>
<p>Lorem ipsum dolor sit amet</p>
</my-pane>
<my-pane title="World">
<h4>World</h4>
<em>Mauris elementum elementum enim at suscipit.</em>
<p><a href ng-click="i = i + 1">counter: {{i || }}</a></p>
</my-pane>
</my-tabs> angular.module('docsTabsExample', [])
.directive('myTabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function($scope) {
var panes = $scope.panes = []; $scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}; this.addPane = function(pane) {
if (panes.length === ) {
$scope.select(pane);
}
panes.push(pane);
};
},
templateUrl: 'my-tabs.html'
};
})
.directive('myPane', function() {
return {
require: '^myTabs',
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
templateUrl: 'my-pane.html'
};
}); my-tabs.html: <div class="tabbable">
<ul class="nav nav-tabs">
<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
<a href="" ng-click="select(pane)">{{pane.title}}</a>
</li>
</ul>
<div class="tab-content" ng-transclude></div>
</div> my-pane.html:
<div class="tab-pane" ng-show="selected" ng-transclude>
</div>
angular.module('docsTabsExample', [])
.directive('myPane', function() {
return {
require: ['^myTabs', '^ngModel'],
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
link: function(scope, element, attrs, controllers) {
var tabsCtrl = controllers[0],
modelCtrl = controllers[1]; tabsCtrl.addPane(scope);
},
templateUrl: 'my-pane.html'
};
});
Creating Directives that Communicate的更多相关文章
- Directive Definition Object
不知道为什么这个我并没有想翻译过来的欲望,或许我并没有都看熟透,不好误人子弟,原版奉上. Here's an example directive declared with a Directive D ...
- Scope Directive
---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...
- How to use data analysis for machine learning (example, part 1)
In my last article, I stated that for practitioners (as opposed to theorists), the real prerequisite ...
- Angular之 Scope和 Directive
---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...
- 【C/C++开发】c++ 工具库 (zz)
下面是收集的一些开发工具包,主要是C/C++方面的,涉及图形.图像.游戏.人工智能等各个方面,感觉是一个比较全的资源.供参考! 原文的出处:http://www.codemonsters.de/ho ...
- 【IOS笔记】Creating Custom Content View Controllers
Creating Custom Content View Controllers 自定义内容视图控制器 Custom content view controllers are the heart of ...
- Redis(7)Creating and Using Cluster Mode
1. DocumentsCluster will not support SELECT, it only contains database 0.All the nodes use TCP bus a ...
- Creating an API-Centric Web Application[转]
Creating an API-Centric Web Application 转自 http://hub.tutsplus.com/tutorials/creating-an-api-centric ...
- Creating Your Own Server: The Socket API, Part 1
转:http://www.linuxforu.com/2011/08/creating-your-own-server-the-socket-api-part-1/ By Pankaj Tanwar ...
随机推荐
- angularJS的$watch和$apply
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- ActiveMQ持久化消息
ActiveMQ的另一个问题就是只要是软件就有可能挂掉,挂掉不可怕,怕的是挂掉之后把信息给丢了,所以本节分析一下几种持久化方式: 一.持久化为文件 ActiveMQ默认就支持这种方式,只要在发消息时设 ...
- NAT原理与NAT穿越
最近在看东西的时候发现很多网络程序中都需要NAT穿越,特意在此总结一下. 先做一个约定: 内网A中有:A1(192.168.0.8).A2(192.168.0.9)两用户 网关X1(一个NAT设备)有 ...
- magento安装新插件后后台配置空白解决办法
前段时间,安装完Magento插件以后,就会出现空白或者404问题,在某些运营中的magento网站,安装新插件后后台配置空白解决. 1 将sysytem->toos->Compilati ...
- [LeetCode]题解(python):104 Maximum Depth of Binary Tree
题目来源 https://leetcode.com/problems/maximum-depth-of-binary-tree/ Given a binary tree, find its maxim ...
- Java学习-033-JavaWeb_002 -- 网页标记语言JSP基础知识
JSP 是 Sun 公司提倡的一门网页技术标准.在 HTML 文件中,加入 Java 代码就构成了 JSP 网页,当 Web 服务器访问 JSP 请求的时候,首先执行其中的 Java 程序源码,然后以 ...
- iOS 冒泡排序
//冒泡排序 -(NSArray*)Bubble_Sort:(NSArray*)oldArray { NSMutableArray * newArray = [NSMutableArray array ...
- SaltStack 入门(赵班长)
SaltStack 入门之赵班长 赵班长博客: https://www.unixhot.com/article/11 1~5章 saltstack官网文档: https://www.unixhot ...
- typedef 和 const
1. typedef 允许你为各种数据类型定义新名字 #include <stdio.h>typedef char *ptr_to_char; //这让我看起来,好奇怪,不好读void m ...
- jboss\server\default\.\tmp 拒绝访问 axis2
下载axis2.war包. 下载jboss-4.2.3.GA.zip和jboss-5.0.1.GA.zip两个包并解压. 配置JDK后要配置JBOSS_HOME的环境变量,在Path中配置%JBOSS ...