Angular. js Custom Instruction Learning Note Example
- 2021-07-24 09:18:41
- OfStack
This article will share with you the code explanation of the custom instruction example of angular. js study notes. The specific code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularDirective</title>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
</head>
<body ng-app="angularJS" >
<!-- <div class="self-direct">{{title}}<input type="text" ng-model='title'></div> -->
<!-- <input type="text" ng-model="color">
<self-direct color='{{color}}'></self-direct>
<self-direct m-color='{{color}}'></self-direct> -->
<!-- <input type="text" ng-model="color">
<self-direct color='color'></self-direct> If bidirectional binding is used, the attribute value in the instruction is a variable by default, so there is no need to add {{}}
<self-direct m-color='color'></self-direct> -->
<!-- <self-direct logo='logo()'></self-direct> -->
<!-- <self-direct ></self-direct> -->
<!-- <self-direct ></self-direct> -->
<self-direct title="JinDong" bgcolor="red" fontcolor="#fff"></self-direct>
<script type="text/javascript">
/*Angular.js Format of custom instructions and related parameters and their values:
let m=angular.module('angularJS',[]);
m.directive('selfDirect',[function(){//selfDirect Represents the name of the custom instruction, using hump nomenclature, when restrict The value of is E At the time of :<self-direct></self-direct>
return {
restrict:'A/E/C',//A:Attrabute,E:Elements,C:class;restrict Property represents how the build instruction is represented in the page , Letters must be capitalized, not recommended C , because C The writing of and CSS Coupling is too strong .
template:'<p>template Option indicates what the directive displays on the page ,template The value of can be either a string or a HTML Can also be a function, such as: template:function(elle,attr){return '<span style="'color:'+attr['color']+'">'+ele.html()+'</span>'},view It is not recommended to use the form of function when there is too much content </p>',
replace:true,// Replace parent tags containing template content with template content
transclude:true,// Its contents are populated into the ng-transclude The specified location
templateUrl:'',// Unreachable template Simultaneous use
scope:true,// Default to false Sets the scope of the directive with a value of {} Variables in the template do not inherit property values from the controller,
controller:['$scope',function($scope){$scope.data={...}}],// Controller in instruction
link:function(scope,elem,attr){},// Use link Complete the pair DOM Operation of ,scope: Scope of instruction ,elem: Instruction tag element ,attr: Attribute array of instruction tag element ,
};
}])
*/
var m=angular.module('angularJS',[]);
m.directive('selfDirect', [function () {
return {
restrict: 'E',
//template:'<h1><span ng-transclude=""></span>This is a Angular.js direction of self definition</h1><div ng-transclude=""></div>',
//replace:true,
//transclude:true,
//templateUrl:'viewModel.html',
//scope:{},
//template:'{{title}}<input type="text" ng-model="title">',
//template:'<p style="color:{{color}}">suNing store</p><input ng-model="color">',
//scope:{color:'@mColor'},// Controller and instruction isolation scope @ Single text binding, the controller can affect the data in the instruction, but the instruction cannot affect the data in the controller
//scope:{color:'=mColor'},// Controller and instruction isolation scope = Bi-directional text binding, the controller can affect the data in the instruction, and the instruction can also affect the data
//template:'<p>{{logo()}}</p>',
//scope:{logo:'&'},// Use & Symbol calls the method in the parent controller
/*replace:true,
templateUrl:'viewModel.html',
controller:['$scope',function($scope){
$scope.data=[{
id:1,title:'puDong'
},{
id:2,title:'JinDong'
},{
id:3,title:'TianMao'
}];
}],*/
scope:{title:'@'},
link:function(scope,elem,attr){
$(elem).css({
backgroundColor:attr['bgcolor'],
color:attr['fontcolor']
}).html(scope.title);
},
};
}]);
/*m.controller('ctrl',['$scope',function($scope){
$scope.title='SuNing store';
$scope.color='red';
$scope.logo=function(){
return 'TianMao store';
};
}]);*/
</script>
</body>
</html>