Four categories of custom attributes
It is divided into: Element E, attribute A, annotation M, and class C, respectively:
<my-dir></my-dir> <span my-dir="exp"></span> <!-- directive: my-dir exp --> <span class="my-dir: exp;"></span>
Create a command simply
html structure:
<div ng-controller="myCtrl"> <div my-customer></div> </div>
JavaScript structure:
('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$ = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
template: 'Name: {{}} Address: {{}}'
};
});
Output:
Name: Naomi Address: 1600 Amphitheatre
Description: Here, the $ attribute and attribute value defined in myCtrl are used in the template in the directive. Similarly, the template in the instruction return object can also be replaced with a path, and the same code in the path html is written as in the template. In this way, more code can be operated.
templateUrl Functional Programming
html structure:
<div ng-controller="myCtrl"> <div my-customer></div> </div>
JavaScript Structure:
('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$ = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
templateUrl: function(elem, attr) {
return 'customer-' + + '.html';
}
};
});
Different templateUrl ①
Name: {{}}
Different templateUrl ②
Address: {{}}
Output result:
Name: Naomi
Address: 1600 Amphitheatre
Description: The value of templateUrl can be a function return value, returning the url used for the html template in the directive.
The scope of the isolating directive
① Through different controllers
html structure:
<div ng-app="myApp">
<div ng-controller="myCtrl1">
<my-customer></my-customer>
</div>
<div ng-controller="myCtrl2">
<my-customer></my-customer>
</div>
</div>
JavaScript Structure:
('myApp', [])
.controller('myCtrl1', ['$scope', function($scope) {
$ = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.controller('myCtrl2', ['$scope', function($scope) {
$ = {
name: 'Igor',
address: '123 Somewhere'
};
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
templateUrl: ''
};
});
templateUrl html structure:
Name: {{}} Address: {{}}
Output result:
Name: Naomi Address: 1600 Amphitheatre
Name: Igor Address: 123 Somewhere
Note: It can be seen that different controllers have different scopes of function. Although the directive is the same, each rendering is separated, so we can abstract the directives for reuse and encapsulation of html templates and code. But this is not very good, because with two controllers, we can use the scope in the directive instead of the scope in the controller. The specific method is to map the external scope to the scope inside the directive, as follows:
② Map scope through instruction attributes
html structure:
<div ng-app="myApp" ng-controller="myCtrl"> <my-customer info="naomi"></my-customer> <my-customer info="igor"></my-customer> </div>
javascript structure:
('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$ = { name: 'Naomi', address: '1600 Amphitheatre' };
$ = { name: 'Igor', address: '123 Somewhere' };
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: ''
};
});
templateUrl html structure:
Name: {{}} Address: {{}}
Compiled html results:
Name: Naomi Address: 1600 Amphitheatre
Name: Igor Address: 123 Somewhere
③ If the scope attribute is defined in the directive, the scope in the html will not directly inherit the scope in the controller. All those used in the html need to be declared in scope:{}, otherwise it will be undefined
html structure:
<div ng-app="myApp" ng-controller="myCtrl"> <my-customer info="naomi"></my-customer> </div>
JavaScript Structure:
('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$ = { name: 'Naomi', address: '1600 Amphitheatre' };
$ = { name: 'Vojta', address: '3456 Somewhere Else' };
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: ''
};
});
templateUrl html structure:
Name: {{}} Address: {{}}
<br>
Name: {{}} Address: {{}}
The result after html compiled:
Name: Naomi Address: 1600 Amphitheatre
Name: Address:
Note: The scope of vojta in the directive is not defined and will not be directly inherited in the controller, so it is undefined, so it is blank (nothing is displayed)
Instructions that can operate DOM
Create a directive for operating dom. If dom operations are required, they should be placed in the directive.
html structure:
<div ng-app="myApp" ng-controller="myCtrl"> Date format: <input ng-model="format"> <hr/> Current time is: <span my-current-time="format"></span> </div>
JavaScript Structure:
('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$ = 'M/d/yy h:mm:ss a';
}])
.directive('myCurrentTime', function($interval, dateFilter) {
return {
restrict: 'AE',
link: function(scope, element, attr){
var format, timeoutId;
/* Update time function */
function updateTime() {
(dateFilter(new Date(), format));
}
/* Monitor time format changes */
var attrWatch = scope.$watch(, function(value) {
format = value;
updateTime();
});
/* Timer */
timeoutId = $interval(function() {
updateTime(); // update DOM
}, 1000);
/* Remove the timer after the page jumps to prevent memory leakage */
('$destroy', function() {
$(timeoutId);
attrWatch(); // Remove watch });
}
};
});
Note: In the link function, operate the dom node to let the dom text node dynamically display time jumps. Clear the timer and monitor in time after the page jumps to avoid memory leakage.
Create directives that can wrap other elements through transclude and ng-transclude
html structure:
<div ng-app="myApp" ng-controller="myCtrl">
<my-dialog>Check out the contents, {{name}}!</my-dialog>
</div>
JavaScript Structure:
('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$ = 'Tobias';
}])
.directive('myDialog', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: '',
link: function(scope) {
= 'Jeff';
}
};
});
templateUrl html structure:
<div class="alert" ng-transclude></div>
Compiled html structure:
Check out the contents, Tobias!
Note: The scope in the directive should be isolated from the scope in the controller, but because the transclude=true option is set, scope will inherit the definition in the controller, so it is Tobias instead of Jeff.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.