angular_$attrs
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>
无标题文档
</title>
<script src="http://localhost:81/js/jquery.js">
</script>
<script src="http://localhost:81/js/angular.min.js">
</script>
</head> <body ng-app="Demo">
<div a>
a_directive
</div>
<div ng-controller="TestCtrl">
<h1 t>
原始内容
</h1>
<h2 t2>
原始内容
</h2>
<h3 t3="hiphop" title2="{{name}}">
原始内容
</h3>
<div compile></div>
<div>
<test a="{{ a }}" b c="xxx"></test> <button ng-click="a=a+1">
修改
</button>
</div>
<te a="1" ys-a="123" ng-click="show(1)">这里</te>
</div>
<script>
var app = angular.module('Demo', [], angular.noop);
app.controller("TestCtrl",
function($scope) {
$scope.name = "qihao";
});
app.directive("t",
function() {
return {
controller : function($scope){$scope.name = "qq"},
template : "<div>test:implementToParent{{name}}</div>",
replace : true,
scope : true //作用域是继承的,默认就是继承的
}
});
app.directive("t2",
function() {
return {
controller : function($scope){$scope.name = "nono"},
template : "<div>test:implementToParent{{name}}</div>",
replace : true,
restrict : "AE"
}
});
app.directive("t3",
function() {
return {
template : "<div>test:implementToParent_titleIs:{{title}}<br>title2Is:{{title2}}</div>",
replace : true,
restrict : "AE",
scope : {
title : "@t3",
title2 : "@title2"
}
}
});
app.directive('a',
function() {
var func = function() {
console.log('compile');
return function() {
console.log('link');
}
} var controller = function($scope, $element, $attrs, $transclude) {
//$transclude ：是指令标签的复制体
console.log('controller');
console.log($scope);
console.log($transclude);
//$transclude接受两个参数，你可以对这个克隆的元素进行操作，
var node = $transclude(function(clone_element, scope) {
$element.append(clone_element);
$element.append("<span>spanTag___</span>");
console.log(clone_element);
console.log('--');
console.log(scope);
});
console.log(node);
} return {
compile: func,
template: "<h1 ng-transclude></h1>",
controller: controller,
transclude: true,
restrict: 'AE'
}
});
app.directive('compile',function() {
var func = function() {
console.log('a compile');
return {
pre: function() {
console.log('a link pre')
},
post: function() {
console.log('a link post')
},
}
}
return {
restrict : "AE",
compile : func
}
}) app.directive('test', function(){
var func = function($element, $attrs){
console.log($attrs); $attrs.$observe('a', function(new_v){
console.log(new_v);
});
} return {compile: func,
restrict: 'E'}
}); app.controller('TestCtrl', function($scope){
$scope.a = 123;
}); app.directive('te', function(){
var func = function($scope,$element, $attrs,$ctrl){
console.log($ctrl)
//$attrs.$set. 给这个属性设置b，值为ooo，就是这样
$attrs.$set('b', 'ooo');
$attrs.$set('a-b', '11');
//这个还有点不懂啊 //第二个参数值
$attrs.$set('c-d', '11', true, 'c_d');
console.log($attrs);
} return {
compile: function(){
return func
},
restrict: 'E'
}
}); app.controller('TestCtrl', function($scope){
$scope.show = function(v){console.log(v);}
});
</script>
</body> </html>
angular_$attrs的更多相关文章
- Android中自定义属性（attrs.xml，TypedArray的使用）
做Android布局是件很享受的事,这得益于他良好的xml方式.使用xml可以快速有效的为软件定义界面.可是有时候我们总感觉官方定义的一些基本组件不够用,自定义组件就不可避免了.那么如何才能做到像官方 ...
- 使用attrs.xml自定义属性
控件有很多属性,如android:id.android:layout_width.android:layout_height等,但是这些属性都是系统自带的属性.使用attrs.xml文件,可以自己定义 ...
- Odoo attrs X2many 类型的过滤
有童鞋在群里问到 attrs 中的 many2many类型的字段该如何进行domain过滤,其实非常简单: Many2many的字段在js中获取的值的格式为[[6,false,[]]] 所以attrs ...
- attrs 中的 uid
Odoo View视图默认是不认识attrs中的uid的,其原因在于后台将xml转化为html的过程中对attrs调用了python的eval方法,而对于eval函数来说,我们传入的形如[(' ...
- 自定义属性，资源文件attrs.xml
1.attrs.xml中写:在values文件夹下. <?xml version="1.0" encoding="utf-8"?> <reso ...
- Android 自定义属性（attrs.xml，TypedArray）
做Android布局是件很享受的事,这得益于他良好的xml方式.使用xml可以快速有效的为软件定义界面.可是有时候我们总感觉官方定义的一些基本组 件不够用,自定义组件就不可避免了.那么如何才能做到像官 ...
- Android中如何利用attrs和styles定义控件
一直有个问题就是,Android中是如何通过布局文件,就能实现控件效果的不同呢?比如在布局文件中,我设置了一个TextView,给它设置了 textColor,它就能够改变这个TextView的文本的 ...
- 关于Android attrs 自定义属性的说明
写个自定义控件时经常要自定义一些自己的属性,平时用的都是那几个,今天就顺便一起总结一下这个东东吧- 一.定义:属性的定义都在attrs.xml文件里面: 二.读取:通过都是通过TypedArray去读 ...
- vue踩坑记录:[Vue warn]: $attrs is readonly.
今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...
随机推荐
- Sql 随机更新一条数据返回更新数据的ID编号
DECLARE @parimaryTable(临时表) Table(prizecode varchar(50)); update top (1) 数据表 set 字段a='数值' ,字段b=‘数值 ...
- Sample SecondarySort 浅析
示例文件: 100 99 100 98 100 56 100 78 20 100 30 100 20 50 30 50 30 60 20 80 需求:首先按第一个数字分组,组成按第二个数字排序. 解决 ...
- Mongodb 主从复制与副本集实验
1.实验主从复制,并验证复制成功,抓图实验过程 Step1:创建相应的目录 Mkdir -p ./dbs/master Mkdir -p ./dbs/slave Step2:开启主服务 ./bin/ ...
- [转]Google Cloud Messaging: Overview
本文转自:https://developers.google.com/cloud-messaging/gcm
- openfire+asmack搭建的安卓即时通讯（五） 15.4.12
这一篇博客其实是要昨天写的,但昨天做了作修改就停不下来了,这次的修改应该是前期开发的最终回了,其余的功能有空再做了,下周可能要做一些好玩的东西,敬请期待! 1.修改下Logo:(Just We) ht ...
- Visualize real-time data streams with Gnuplot
源文地址 (September 2008) For the last couple of years, I've been working on European Space Agency (ESA) ...
- Linux 系统常用命令汇总（二） vi 文本编辑
文本编辑 vi 命令 作用 +文件名 编辑文本文件,若文件不存在同时创建该文件 Ctrl+f 向后翻一页 Ctrl+b 向前翻一页 Ctrl+d 向后翻半页 Ctrl+u 向前翻半页 + 光标移动到下 ...
- 如何用dos命令运行testng
写好的自动化程序怎么让它运行呢,总不能每次都启动eclipse吧,下面就先介绍一种用dos命令运行testNG的方法. 1.把项目打成jar吧,我用的是Fat jar工具. 2.在电脑的某个盘建一个文 ...
- 该怎么快速完成ZBrush中脸部的雕刻
骨骼,是一门基础艺术,几百年来一直为伟大的艺术大师所研究,它曾经,也将一直是创作现实且可信角色的关键,提高骨骼知识更将大大提高雕刻技能. 若有疑问可直接访问:http://www.zbrushcn.c ...
- iOS使用Core Graphics和UIBezierPath绘画
通过UIView的子类的- (void)drawRect:(CGRect)rect 函数可用对视图进行重新绘画: 要重新绘画可以通过Core Graphics和UIBezierPath来实现. 1.通 ...