Angular 学习笔记——自定义标签
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div,#div2 div{ width:200px; height:200px; border:1px red solid; display:none;}
#div1 input.active , #div2 input.active{ background:red;}
</style>
<script src="angular.min.js"></script>
<script> var m1 = angular.module('myApp',[]);
m1.directive('myTab',function(){
return {
restrict : 'E',
replace : true,
//scope : true,
scope : {
myId : '@',
myName : '=',
myFn : '&'
},
controller : ['$scope',function($scope){
$scope.name = 'miaov';
}],
templateUrl : 'temp2.html'
};
}); m1.controller('Aaa',['$scope',function($scope){ $scope.name = 'hello';
$scope.show = function(n){
alert(n);
}; }]); </script>
</head> <body ng-controller="Aaa">
<my-tab my-id="div1" my-name="name" my-fn="show(num)"></my-tab>
<my-tab my-id="div2" my-name="name" my-fn="show(num)"></my-tab>
</body>
</html>
temp2.html
<div id="{{myId}}">
<input class="active" type="button" value="1" ng-click="myFn({num:456})">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">{{name}}</div>
<div>22222222</div>
<div>33333333</div>
</div>
Angular 学习笔记——自定义标签的更多相关文章
- Angular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】
利用“@angular/forms" 创建<form>表单的时候,系统默认会创建一个”FormGroup"的对象. 使用带有“ngModel"的”<in ...
- Angular 学习笔记——自定义指令之间的交互
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
- Angular 学习笔记——自定义指令
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- MAC使用IDA PRO远程调试LINUX程序
1 背景 在学习Linux系统上的一些漏洞知识的时候,往往需要进行“实地测试”,但是在Linux系统上进行调试并不太方便,因为LINUX自带的GDB调试工具真的不太人性化,即使有GDBTUI之类的“伪 ...
- HDU1892 See you~
Time Limit: 5000/3000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total Submission( ...
- 云服务器基本环境配置（php5.6+mysql+nginx）
1.安装nginx sudo apt-get install nginx nginx 基本配置 server{ listen ; server_name www.xxxxxx.cn; root /va ...
- 结构型设计模式之桥接模式(Bridge)
结构 意图 将抽象部分与它的实现部分分离,使它们都可以独立地变化. 适用性 你不希望在抽象和它的实现部分之间有一个固定的绑定关系.例如这种情况可能是因为,在程序运行时刻实现部分应可以被选择或者切换. ...
- 生成DLL
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...
- 非MFC工程中使用MFC库
目录(?)[-] 需求说明 常见问题 问题分析 参考解决方法 我的解决方案 Stdafxh的原理 需求说明 C++工程的类型有很多,从VS(或VC)可以看到常见的有:Win32 Console A ...
- 判断dataset是否被修改—DataSet.HasChanges 方法
DataSet.HasChanges 方法 获取一个值,该值指示 DataSet 是否有更改,包括新增行.已删除的行或已修改的行. 命名空间: System.Data程序集: System.Da ...
- 关于Banner设计的促销氛围
banner的促销氛围有很多种创意方向和排版布局,如下图: 如下面这种banner,背景大面积留白,细小的字体,单调的颜色,高冷的模特,感觉就不一样了.并不让人感觉这是在卖49元的衣服,文案和画面也搭 ...
- Selenium2+python自动化6-八种元素元素定位（Firebug和firepath）【转载】
前言 自动化只要掌握四步操作:获取元素,操作元素,获取返回结果,断言(返回结果与期望结果是否一致),最后自动出测试报告.本篇主要讲如何用firefox辅助工具进行元素定位.元素定位在这四个环节中是至关 ...
- Codeforces 208E - Blood Cousins（树上启发式合并）
208E - Blood Cousins 题意 给出一棵家谱树,定义从 u 点向上走 k 步到达的节点为 u 的 k-ancestor.多次查询,给出 u k,问有多少个与 u 具有相同 k-ance ...