大佬教程收集整理的这篇文章主要介绍了angularjs 中directive自定义指令介绍,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
作用:
语法:
模块对象.directive('指令名称',[function(){ return { // 指令的具体配置 } }])
<!-- 指令名称:myBtn --> <div my-btn></div> <my-btn></my-btn> <div class="my-btn"></div> <!-- directive:my-btn -->
示例如下:
<body ng-app="myApp"> <div my-Dir="blue">DIV</div> <script src="node_modules/angular/angular.js"></script> <script> var app = angular.module('myApp',[]); app.directive("myDir",[function(){ return { reStrict:"AE",templateUrl:"HelloTpl",//引入模板内容 transclude:true,//将之前自定义标签内的内容保存到ng-transclude replace:true,//删除自定义标签,注意:删除了定义标签,模板内的多个标签必须有一个父标签包裹,否则报错 link:function(scope,element,attributes){ // scope:标签的作用域 -->作用等同于$scope // element:jqLite对象 // attributes:当前指令所在元素的属性集合 element.css("BACkground","blue"); } } }]) </script> <script type="text/ng-template" id="HelloTpl"> <div> <span><b ng-transclude ng-click="clickFn()"></b>你好,欢迎来到angularjs的世界</span> <p>我是段落标签</p> </div> </script> </body>
自定义控件绑定$scope分为 @,=,& 三种情况。个人认为@:单向绑定,=:双向绑定, &: 用于绑定函数,下面看看Angularjs权威指南的介绍 @ 本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定。 也可以指定属性名,查找的是指定属性还不是之前的someProperty了!!! scope: { someProperty: '@someAttr' } = 双向绑定:通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。 就像普通的数据绑定一样,本地属性会反映出父数据模型中所发生的改变 & 父级作用域绑定 通过&符号可以对父级作用域进行绑定,以便在其中运行函数。 意味着对这个值进行设置时会生成一个指向父级作用域的包装函数.
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>angularjs demo</title> </head> <body ng-app="myApp" ng-controller="demoCtrl"> <div my-dir msg="{{msg}}" person="person" show="show()"></div> <script src="node_modules/angular/angular.js"></script> <script> /* scope : false 指令没有单独的作用域 并且会继承父级作用域 scope : true 指令拥有单独的作用域 并且会继承父级作用域 scope : {} 指令拥有单独的作用域 不会继承父级作用域 @ 去指令所在的元素身上找有没有一个叫做msg的同名属性 如果有 将同名属性的值 赋值给当前指令内部的R_536_11845@sg 通过@取到的数据 无论你看它像什么类型的都好 其实它都是字符串 = 去指令所在的元素身上找有没有一个叫做person的同名属性 如果有 将同名属性的值 赋值给当前指令内部的person & 去父级作用域中匹配同名的函数,说白了,就是在自定义指令作用中,调用父级方法 */ var app=angular.module("myApp",[]) //添加自定义属性 .directive("myDir",[function(){ return { reStrict:"A",scope:{ msg:"@",person:"=",show:"&" },templateUrl:"tpl" } }]) .controller("demoCtrl",["$scope",function($scopE){ $scope.msg = "我是控制器中的msg"; $scope.person = ['Jack','Rose','lilei','hanmeimei']; $scope.show=function(){ alert("1"); } }]) </script> <script type="text/ng-template" id="tpl"> <button ng-click="show()">{{msg}}</button> <div ng-repeat="item in person">{{item}}</div> </script> </body> </html>
以上是大佬教程为你收集整理的angularjs 中directive自定义指令介绍全部内容,希望文章能够帮你解决angularjs 中directive自定义指令介绍所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。