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 相关文章推荐
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
jQuery 中DOM 操作详解
Jan 13 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
vue路由插件之vue-route
Jun 13 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
PHP编程网上资源导航
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
php 中的closure用法详解
2017/06/12 PHP
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
Python单链表简单实现代码
2016/04/27 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
区域销售经理岗位职责
2013/12/10 职场文书
人事专员的岗位职责
2014/03/01 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
校园安全主题班会
2015/08/12 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技