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的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- [04]JS获取文件大小方法
</pre><pre name="code" class="html"><input id="file" ty ...
- Jquery CheckBox 选中和非选中
if($("input[name='is_pay']").prop('checked')) { $("input[name='is_pay']").prop(' ...
- Android 系统启动过程详解
android 使用 linux 内核,一般运行在 ARM 体系架构上,android 设备启动的过程,应用层之下基本等同于linux, 从应用层第一个程序init开始有所区别,下面开始介绍. ste ...
- 用 gdb 调试 GCC 程序【转】
用 GDB 调试程序 原著:Rick McMullin 用 gdb 调试 GCC 程序 转自:http://blog.csdn.net/bonnshore/article/details/795542 ...
- 内核request_mem_region 和 ioremap的理解【转】
转自:http://blog.csdn.net/skyflying2012/article/details/8672011 版权声明:本文为博主kerneler辛苦原创,未经允许不得转载. 几乎每一种 ...
- 中国大陆无法访问Steve Purcell的emacs配置解决办法
因为大陆网络问题,没办法访问Steve Purcell的emacs配置中的melpa.org,所以我们更改目录即可. 1.删除自己的配置. $ rm ~/.emacs $ rm -rf ~/.emac ...
- sharepoint 2013 和 office web apps server 2013集成
环境: 三台服务器 系统:window 2008 R2server01: 192.168.10.162(office web app)server02: 192.168.10.163(AD)serv ...
- 使用after伪类，配合IE的zoom或者overflow清除浮动
用after伪类实现,兼容多种浏览器:.clearfix:after {content:"."; display:block; height:0; clear:both; visi ...
- Guess Number Higher or Lower II -- LeetCode
We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...
- （转）Unity3d通过Action注册事件，回调方法
http://www.cnblogs.com/jisi5789/archive/2013/04/22/3036589.html using UnityEngine; namespace Liulala ...