<!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. Microsoft Community

    一.简介 Microsoft Community 是一个免费社区和讨论论坛,项目开发遇到的问题可以在这里进行提出和解答. 二.地址 http://answers.microsoft.com/zh-ha ...

  2. Java中的静态方法和单例模式比较

    区别 单例模式方法 静态方法 实例 创建实例 无 运行 类的实例的方法 类的方法 也可以通过实例化,在通过类的实例来运行 是否可以被重写 可以 可以(子类的该方法也必须是静态方法) 调用其他静态方法 ...

  3. atomic, spinlock and mutex性能比较

    我非常好奇于不同同步原理的性能,于是对atomic, spinlock和mutex做了如下实验来比较: 1. 无同步的情况 #include <future> #include <i ...

  4. 内存流和null字节

    #include <stdio.h> #include <string.h> int main() { ]={}; FILE* fp = fmemopen(buf,," ...

  5. docker containerd shim分析

    // containerd-shim is a small shim that sits in front of a runtime implementation that allows it to ...

  6. 在mac os下的Apache服务器的cgi中运行python

    我是搬运工.. Running Python Programs on the Mac OS X Apache Web Server The Mac OS X operating system incl ...

  7. HDU 4286 Data Handler --双端队列

    题意:有一串数字,两个指针,然后一些添加,删除,反转,以及移动操作,最后输出序列. 解法:可以splay做,但是其实双端队列更简便. 维护三个双端队列LE,MI,RI分别表示[L,R]序列左边,[L, ...

  8. 【转】${sessionScope.user}的使用方法

    EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...

  9. 动态调用webservice，不需要添加Web References

    using System; using System.Collections.Generic; using System.Web; using System.Net; using System.IO; ...

  10. 《JAVA与模式》之适配器模式(转)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述适配器(Adapter)模式的: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能 ...