<!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. D_S 线性结构

    线性结构的定义:若结构是非空有限集,则有且仅有一个开始结点和一个终端结点,并且所有结点都最多只有一个直接前驱和一个直接后继. 线性结构的特点: 只有一个首结点和尾结点 除首尾结点外,其他结点只有一个直 ...

  2. cmd获取系统时间

    查看时间格式: echo %date% echo %time% 通过%date:~5,2%来组合得出当前日期,组合的效果为yyyymmdd,date命令得到的日期格式默认为yyyy-mm-dd,通过% ...

  3. Java 集合介绍

    1, Set :集合中对象不按特定的方式排序,并且没有重复对象,它有些实现类能对集合按特定方式排序 List :集合中对象按照索引位置排序,可以有重复对象,允许按照对象在集合中的索引位置检索独享,Li ...

  4. hihocoder 1388 &&2016 ACM/ICPC Asia Regional Beijing Online Periodic Signal

    #1388 : Periodic Signal 时间限制:5000ms 单点时限:5000ms 内存限制:256MB 描述 Profess X is an expert in signal proce ...

  5. 合唱队形2 洛谷U5874

    题目背景 上次老师挑出来的(N-K)位同学很不高兴,于是他们准备自己组建合唱队形.他们请了kkk来帮忙. 题目描述 他们安排了一个动作——手拉着手唱一首歌(就是他们围成一个圈).如果有两个相邻的同学的 ...

  6. [C#] 委托之Action和Func区别

    一.说明 一般我们定义委托都是有如下两步: public delegate void MyDelegate(string name);//定义委托 public MyDelegate myDelega ...

  7. java 19 -14 File类的判断并输出案例

    package zl_file; import java.io.File; import java.io.FilenameFilter; /* 需求: 判断E盘目录下是否有后缀名为.jpg的文件,如果 ...

  8. Windows Phone：如何检查WMAppManifest中的Capability属性

    在Windows Phone应用中有一个应用程序清单(WMAppManifest.xml),其中对于不同的应用可以设定Capability来告知需要哪些特性或功能,详细内容可以参考官方文档: http ...

  9. tftp从linux下载文件

    1,背景: 当我们ssh到一台linux上时候,从linux上下载一些文件,方案如下: 1.1通过sftp:通过win7 ftp客户端连接到linux去下载文件. 1.2通过tftp 2,问题 有些l ...

  10. phpmailer 参数使用说明

    $AltBody--属性 出自:PHPMailer::$AltBody 文件:class.phpmailer.php 说明:该属性的设置是在邮件正文不支持HTML的备用显示 AddAddress--方 ...