angularjs中的自定义指令
一：自定义指令的介绍
-
作用:
-
语法：
- 如何定义一个最基本的自定义指令
模块对象.directive('指令名称',[function(){ return { // 指令的具体配置 } }])- 指令在HTML中的使用
<!-- 指令名称:myBtn --> <div my-btn></div> <my-btn></my-btn> <div class="my-btn"></div> <!-- directive:my-btn -->
-
指令的配置参数介绍
-
自定义指令的简写形式
- 当定义的指令全部使用默认参数 仅需要一个写DOM操作的地方
模块对象.directive('指令名称',[function(){ return function(){ // 此处写具体的DOM操作 } }])
示例如下：
<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的绑定
自定义控件绑定$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的同名属性 如果有 将同名属性的值 赋值给当前指令内部的msg 通过@取到的数据 无论你看它像什么类型的都好 其实它都是字符串 = 去指令所在的元素身上找有没有一个叫做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>原文链接：https://www.f2er.com/angularjs/146071.html
