[AngularJS] Directive using another directive by 'require'
Directive can use another directive though 'require' keyword.
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 === 0) {
$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'
};
});
The myPane
directive has a require
option with value ^myTabs
. When a directive uses this option, $compile
will throw an error unless the specified controller is found. The ^
prefix means that this directive searches for the controller on its parents (without the ^
prefix, the directive would look for the controller on just its own element).
[AngularJS] Directive using another directive by 'require'的更多相关文章
- angularjs可交互的directive
angularjs可交互的directive http://jsfiddle.net/revolunet/s4gm6/ directive开发上手练手,以注释的方式说明 html <body n ...
- AngularJS系统学习之Directive(指令)
本文转自https://www.w3ctech.com/topic/1612 原文作者: Nicolas Bevacqua 原文:AngularJS’ Internals In Depth, Part ...
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
- AngularJS创建新指令directive参数说明
var myapp = angular.module('myapp', []); myapp.directive('worldname', function() { return { template ...
- AngularJs(Part 11)--自定义Directive
先对自定义Directive有一个大体的映像 myModule.directive('myDirective',function(injectables){ var directiveDefiniti ...
- [AngularJS + Unit Testing] Testing Directive's controller with bindToController, controllerAs and isolate scope
<div> <h2>{{vm.userInfo.number}} - {{vm.userInfo.name}}</h2> </div> 'use str ...
- angularjs学习笔记三——directive
AngularJS 通过被称为 指令 的新属性来扩展 HTML. 正如你所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性. HTML5 允许扩展的(自制的)属性,以 data- ...
- 利用angularJs自定义指令(directive)实现在页面某一部分内滑块随着滚动条上下滑动
最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...
- angularJs自定义指令(directive)实现滑块滑动
最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...
随机推荐
- JavaScript UI技术选型
ExtJS l ExtJS(TODO:找旧版本,类似现在EasyUI插件的旧版本)简介:纯JS支持:IE6授权:GPLv3授权.商业授权($329/人) l Ext.NET简介:ExtJS的NET封装 ...
- 【windows核心编程】DLL相关(1)
DLL相关的东西 1.DLL的加载方式 隐式: #pragma comment(lib, "XX.lib"); 编译器去查找名为XX.dll的DLL,除了名字相同,该DLL和该LI ...
- ARM处理机模式--内部寄存器
处理器模式 用户模式(user)简称usr 快速中断模式(FIQ)简称fiq 外部中断模式(IRQ)简称irq 特权模式(supervisor)简称sve 数据访问终止模式(abort)简称abt 未 ...
- 多校5 1001 HDU5781 ATM Mechine 记忆化搜索+概率
// 多校5 1001 HDU5781 ATM Mechine // http://acm.hdu.edu.cn/search.php?field=problem&key=2016+Multi ...
- android中向bitmap里写入文字
public static Bitmap drawText2Bitmap(String text, int imgResourceId, Context mContext) { try { Resou ...
- 递归算法,JavaScript实现
我们先来看一下定义.递归算法,是将问题转化为规模缩小的同类问题的子问题,每一个子问题都用一个同样的算法去解决.一般来说,一个递归算法就是函数调用自身去解决它的子问题. 递归算法的特点: 在函数过程中调 ...
- struts2+Hibernate4+spring3+EasyUI环境搭建之五:引入jquery easyui
1.下载jquery easyui组件 http://www.jeasyui.com/download/index.php 2.解压 放到工程中 如图 3.jsp引入组件:必须按照如下顺序 ...
- snprintf 返回值
在平时写代码的过程中,我一个推荐带有n系列的字符串函数,如 strcat ->strncat sprintf->snprintf 我们有类似的一个函数 void dump_kid(std: ...
- JSF 2.0 + Ajax hello world example
In JSF 2.0, coding Ajax is just like coding a normal HTML tag, it's extremely easy. In this tutorial ...
- Winter is coming Just have a little faith. JSF框架简介与实例
JSF 体系结构: JSF 的主要优势之一就是它既是Java Web应用程序的用户界面标准又是严格遵循模型-视图-控制器 (MVC) 设计模式的框架.用户界面代码(视图)与应用程序数据和逻辑(模型)的 ...