<!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的更多相关文章

  1. Android中自定义属性（attrs.xml，TypedArray的使用）

    做Android布局是件很享受的事,这得益于他良好的xml方式.使用xml可以快速有效的为软件定义界面.可是有时候我们总感觉官方定义的一些基本组件不够用,自定义组件就不可避免了.那么如何才能做到像官方 ...

  2. 使用attrs.xml自定义属性

    控件有很多属性,如android:id.android:layout_width.android:layout_height等,但是这些属性都是系统自带的属性.使用attrs.xml文件,可以自己定义 ...

  3. Odoo attrs X2many 类型的过滤

    有童鞋在群里问到 attrs 中的 many2many类型的字段该如何进行domain过滤,其实非常简单: Many2many的字段在js中获取的值的格式为[[6,false,[]]] 所以attrs ...

  4. attrs 中的 uid

        Odoo View视图默认是不认识attrs中的uid的,其原因在于后台将xml转化为html的过程中对attrs调用了python的eval方法,而对于eval函数来说,我们传入的形如[(' ...

  5. 自定义属性，资源文件attrs.xml

    1.attrs.xml中写:在values文件夹下. <?xml version="1.0" encoding="utf-8"?> <reso ...

  6. Android 自定义属性（attrs.xml，TypedArray）

    做Android布局是件很享受的事,这得益于他良好的xml方式.使用xml可以快速有效的为软件定义界面.可是有时候我们总感觉官方定义的一些基本组 件不够用,自定义组件就不可避免了.那么如何才能做到像官 ...

  7. Android中如何利用attrs和styles定义控件

    一直有个问题就是,Android中是如何通过布局文件,就能实现控件效果的不同呢?比如在布局文件中,我设置了一个TextView,给它设置了 textColor,它就能够改变这个TextView的文本的 ...

  8. 关于Android attrs 自定义属性的说明

    写个自定义控件时经常要自定义一些自己的属性,平时用的都是那几个,今天就顺便一起总结一下这个东东吧- 一.定义:属性的定义都在attrs.xml文件里面: 二.读取:通过都是通过TypedArray去读 ...

  9. vue踩坑记录:[Vue warn]: $attrs is readonly.

    今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...

随机推荐

  1. xamarin.android 沉浸式状态栏

    public class SystemBarTintManager { /** * The default system bar tint color value. */ public static ...

  2. Ubuntu 14.04（32位）安装Oracle 11g（32位）全过程

    1.将系统更新到最新:sudo apt-get updatesudo apt-get dist-upgrade2.安装Oracle所需的依赖包:sudo apt-get install automak ...

  3. Hadoop 2.0中单点故障解决方案总结

    Hadoop 1.0内核主要由两个分支组成:MapReduce和HDFS,众所周知,这两个系统的设计缺陷是单点故障,即MR的JobTracker和HDFS的NameNode两个核心服务均存在单点问题, ...

  4. Django项目中如何建表？怎样导入数据？

    http://django-chinese-docs.readthedocs.org/en/latest/topics/db/models.html 通常在项目中的models.py文件中建表的 Th ...

  5. Java虚拟机详解05----垃圾收集器及GC参数

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  6. 关于JAVA应用中文字体显示小方框的问题解决

    最近碰到linux下jboss应用中中文字体显示为小方框: “在JRE 5以上的java环境中,java会自动加载$JAVA_HOME/jre/lib/fonts目录下的字体.链接或复制宋体或微软雅黑 ...

  7. Hibernate入门注解笔记

    @Entity 代表实体 映射一张表 @Table 定义表的属性 @Embeddable 定义类级别可以被嵌入 @Id 指定主键 @GeneratedValue 指定主键生成策略 @Column指定列 ...

  8. 纯CSS3实现兔斯基简单害羞表情

    前言 很不巧前天突然就感冒了,都怪自己吃太多饼干导致上火了.整个人都无精打采.本来想多做几个兔斯基表情的,但身体发热很难受.所以就只完成一个简单点的表情耍一耍. 正文 先看一下这个简单到不能再简单的小 ...

  9. linux vmstat 系统结果说明

    可以用vmstat 显示系统负载等信息. 例如 vmstat 5 5,表示在T(5)秒时间内进行N(5)次采样. procs:r-->;在运行队列中等待的进程数b-->;在等待io的进程数 ...

  10. 联想Y50p预装win8系统改为win7

    &1 修改OS Optimized Defaults 开机,按[F2]进入BIOS设置,按右方向键选择到EXIT上面,按下方向键选择OS Optimized Defaults,回车,将Win8 ...