angularJs编写多指令的情况
本实例主要展示controller和link参数的使用.以及多个指令同时作用的情况.
<!DOCTYPE html>
<html ng-app="myModule">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<div>
<superman strength>动感超人---力量</superman>
</div>
<div>
<superman strength speed>动感超人---力量+速度</superman>
</div>
<div>
<superman strength speed light>动感超人---力量+速度+发光</superman>
</div>
</div> </body>
<script type="text/javascript" src="../js/angular1.4.3.js"></script>
<script type="text/javascript">
var myModule=angular.module("myModule",[]);
myModule.directive("superman", function () {
return{
scope:{},
restrict:"AE",
controller:function($scope){
$scope.abilities=[];
this.addStrength= function () {
$scope.abilities.push("strength");
};
this.addSpeed= function () {
$scope.abilities.push("speed");
};
this.addLight= function () {
$scope.abilities.push('light');
};
},
link: function (scope,element,attrs) {
element.bind("mouseenter", function () {
console.log(scope.abilities);
})
}
}
});
myModule.directive("strength", function () {
return{
require:"^superman",
link: function (scope, element, attrs, supermanCtrl) {
supermanCtrl.addStrength();
}
}
});
myModule.directive("speed", function () {
return{
require:"^superman",
link: function (scope, element, attrs, supermanCtrl) {
supermanCtrl.addSpeed();
}
};
});
myModule.directive("light", function () {
return{
require:"^superman",
link: function (scope,element,attrs,supermanCtrl) {
supermanCtrl.addLight();
}
}
})
</script>
</html>
angularJs编写多指令的情况的更多相关文章
- AngularJs编写指令
<!DOCTYPE html> <html ng-app="app"> <head lang="en"> <meta ...
- AngularJS移动开发中的各种坑
捂脸,辛酸泪ing...... 本文主要涉及部分在移动设备上特有的问题. 相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. DOM操作的问题 避免使用 jQue ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- AngularJS开发经验(转)
AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让 ...
- AngularJS移动开发中的坑汇总
使用AngualrJs开发移动App已经快半年了,逐渐积累了非常多AngularJS的问题,特别是对于用惯了Jquery的开发人员,转到AngularJS还是须要克服非常多问题的.不像Jquery那样 ...
- AngularJS 2调用.net core WebAPI的几个坑
前几天,按照AngularJS2的英雄指南教程走了一遍,教程网址是http://origin.angular.live/docs/ts/latest/tutorial/. 在步骤完成后,又更进一步,在 ...
- 带你走近AngularJS - 创建自己定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...
- 带你走近AngularJS 之创建自定义指令
带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...
- AngularJS开发经验
AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让 ...
随机推荐
- 002. 在HTML页面嵌入循环代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...
- C# 输出pdf文件流在页面上显示
1 不调用itextsharp.dll的操作 /// <summary> /// 生成pdf流 /// </summary> /// ...
- 通过批处理文件启动oracle11g服务
注:ORCL是数据库实例名,默认的数据库是ORCL,你可以创建其他的,即OracleService+数据库名. ========================================启动服务 ...
- SQL开发利器SQL Prompt
SQL开发利器SQL Prompt 5.1完全破解+使用教程 - keepfool - 博客园 http://www.cnblogs.com/keepfool/archive/2012/05/27/2 ...
- [转]phonegap 2.9 IOS Xcode 搭建环境
phonegap 2.9 IOS Xcode 搭建环境 一:下载phoneGap2.9和安装Xcode5(目前最新版) 选择2.9是因为3.0以上坑爹版本编译神马的要在有网络情况. 二: 下载ph ...
- 剑指offer系列40----机器人的运动范围
package com.exe8.offer; /** *[题目]地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动, * 每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标 ...
- 剑指offer系列22--二叉树中和为某一值的路径
22[题目]输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径. * 路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径 * [思路]只要从根结点到叶结点一条一条遍 ...
- 百度地图和js操作iframe
document.getElementById("ifarme-63").contentWindow.document.getElementById("qksv" ...
- 在Myeclipse中移除项目对Hibernate的支持
在Myeclipse中移除项目对Hibernate的支持 在使用Hibernate框架进行开发时可能会遇到配置错误或者需要删除Hibernate支持的情况.下面就说一下如何彻底移除项目的Hiberna ...
- C语言每日一题之No.8
正式面对自己第二天,突然一种强烈的要放弃的冲动,在害怕什么?害怕很难赶上步伐?害怕这样坚持到底是对还是错?估计是今天那个来了,所以身体激素有变化导致情绪起伏比较大比较神经质吧(☆＿☆)~矮油,女人每个 ...