<!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. sql date时间加减几天几小时

    //时间转成年月日时分秒select date_format(now(),'%Y%m%d%H%i%S')//时间转成年月日select date_format(now(),'%Y%m%d')//去年此 ...

  2. jQuery选择器简单例子

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery_5.aspx. ...

  3. c#分页读取GB文本文件

    应用场景: a.我在做BI开发测试的时候,有可能面对source文件数GB的情况,如果使用一般的文本编辑器,则会卡死,或要等很久才能显示出来. b.有时候,我们使用ascii(01)或ascii(02 ...

  4. Selenium2怎么调用selenium1中方法

    虽然selenium1.0已经成为过去时,现在都用selenium2.0,但是如果想要在代码中调用selenium1.0的api怎么办,看下面 WebDriver driver = new Chrom ...

  5. Linux (二) vi

    1  步骤 1)  vi  test.txt 进入一般模式 2)   i    进入编辑模式,输入内容 3)  Esc 回到一般模式 4)  :wq 存储后退出 2  编辑模式 [i] 光标处插入, ...

  6. Linux下检测IP地址冲突及解决方法

    问题说明:在公司办公网内的一台物理机A上安装了linux系统(ip:192.168.9.120),在上面部署了jenkins,redmine,svn程序.由于是在办公网内,这台机器和同事电脑都是在同一 ...

  7. PHP5.5 + IIS + Win7的配置

    PHP运行环境主要分windows环境和linux环境,本文主要简单介绍下我自己的配置,其他就不一一说明了. windows环境 方式一:.Apache的安装配置:2.MySQL的安装配置,可安装ph ...

  8. ASP.NET MVC+WCF+NHibernate+Autofac 框架组合（一）

    学习了Spring.NET+NHibernate的框架,觉得Spring.NET框架不够轻量,配置来配置去的比较头疼,所以把Spring.NET换成了Autofac框架,同时加入WCF框架整了一个组合 ...

  9. php基础32：正则匹配-修饰符

    <?php //正则表达式--修饰符一般放在//的外面 //1. i 表示不区分大小写 $model = "/php/"; $string = "php" ...

  10. sqlalchemy 的 ORM 方式使用示例

    知乎: 使用 sqlalchemy 的 orm 方式操作数据库是一种怎样的体验? 答: 酸爽! 本文基于:win10 + python3.4 + sqlAlchemy 1.0.13 先看一个图(来源) ...