1. Custom directives
In angular, the directive method below the module is used to create custom directives, using:
M1.directive (' Mytab ', function () {
return {
Restrict: ' AE ',
Replace:true,
Templateurl: ",
};
});
For general usage, return an object in the second argument of directive, which has various properties.
Restrict----Specifies what type of instruction is created, a--attr attribute Directive, e--element label directive, C---class instruction, M---annotation directive. A and E are commonly used.
Replace---If the element is replaced with a template
Templateurl---specifying template strings
There are also some:
Controller---instructions. This allows you to define some data and methods that you specify as common. Such as:
Controller: [' $scope ', function ($scope) {
$scope. Name = ' Meng ';
$scope. Show = function (n) {
alert (n+1);
}
}],
Scope---scopes, total three values
The default value is False.
Represents the inherited parent scope;
True
Represents an inherited parent scope and creates its own scope (sub-scope);
{}
Represents the creation of a completely new isolation scope;
There are three kinds of binding policies in the isolation scope [email protected],=,&
@---Use @ (@attr) for one-way text (string) binding
=---use = (=attr) for bidirectional bound variables
&---Use & to invoke functions in the parent scope
Link: A function for manipulating the DOM, adding events, calling between instructions
The function has a total of 4 parameters, Scope,element,attr,recontroller
Scope---The scope of the directive
Element---the top-level elements of the directive after parsing
attr--Property
The interaction between the instructions via transclude and require
After setting transclude:true, you can nest instructions by ng-transclude
Require---String represents the name of another instruction, which will be the fourth parameter of the link function
Without a prefix, the instruction will be found in the controller provided by itself, and if no controller is found, an error will be thrown
？ If the required controller is not found in the current instruction, NULL is passed to the fourth parameter of the link connection function
^ If the required controller is not found in the current instruction, the controller of the parent element is looked up
? ^ Combination
<!DOCTYPE HTML><HTMLNg-app= "MYAPP"><Head> <Scriptsrc= "Http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></Script></Head><Body> <outer-directive> <inner-directive></inner-directive> <Inner-directive2></Inner-directive2> </outer-directive> <Script> varapp=Angular.module ('myApp', []); App.directive ('outerdirective', function() { return{scope: {}, Restrict:'AE', Controller:function($scope) { This. Say= function(somedirective) {Console.log ('Got:' +somedirective.message); }; } }; }); App.directive ('innerdirective', function() { return{scope: {}, Restrict:'AE', require:'^outerdirective', Link:function(Scope, Elem, Attrs, controllerinstance) {scope.message= "Hi,leifeng"; Controllerinstance.say (scope); } }; }); App.directive ('InnerDirective2', function() { return{scope: {}, Restrict:'AE', require:'^outerdirective', Link:function(Scope, Elem, Attrs, controllerinstance) {scope.message= "Hi,shushu"; Controllerinstance.say (scope); } }; }); </Script></Body></HTML>
M1.directive (' Mytab ',function(){ return{restrict:E, replace:true, scope: {myId:‘@‘, MyData:=}, CONTROLLER: [' $scope ',function($scope) {$scope. Name= ' Meng '; }], Templateurl:' Temp3.html ', Link:function(scope,element,attr) {//Console.log (scope.name); //Console.log (element); //Console.log (Attr.myid); }});
Custom Directive directive
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
