angularJS 中$attrs方法使用指南


Posted in Javascript onFebruary 09, 2015

这里给大家分享的是一个angularJS 中$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>

本文内容就到这里了,希望大家能对angularJS 中$attrs的使用有了新的认识,希望大家能够喜欢本文。

Javascript 相关文章推荐
js 数组克隆方法 小结
Mar 20 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
vue模块移动组件的实现示例
May 20 Javascript
JavaScript实现获取dom中class的方法
Feb 09 #Javascript
angularJS 中input示例分享
Feb 09 #Javascript
angularJS提交表单(form)
Feb 09 #Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 #Javascript
js选项卡的实现方法
Feb 09 #Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 #Javascript
angularJS中router的使用指南
Feb 09 #Javascript
You might like
PHP高级OOP技术演示
2009/08/27 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
Python常用模块介绍
2014/11/21 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
python脚本和网页有何区别
2020/07/02 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
python palywright库基本使用
2021/01/21 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
初中女生自我鉴定
2013/12/19 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
挂牌仪式主持词
2014/03/20 职场文书
2014最新实习证明模板
2014/10/02 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
英文版辞职信
2015/02/28 职场文书
专职安全员岗位职责
2015/04/11 职场文书
初中政教处工作总结
2015/08/12 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers