Home > Developer > JavaScript
In Angular. JS, the instruction reference template and instruction are described as attributes. angular. jstemplate
I. reference template
Commands can be simply understood as functions running on specific DOM elements. commands can extend the functions of these elements.
The command must take effect.
The value of ng-app is the same as the module name of the definition command:
angular.module('app',[])Complete command parameters:
Angular. module ('myapp', []). directive ('myctive', function () {return {restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function (tElement, tAttrs) {...}, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String or function (scope, element, attrs, transclude, otherInjectables) {...}, controllerAs: String, require: String, link: function (scope, iElement, iAttrs ){...}, compile: // returns an object or connection function, as shown below: function (tElement, tAttrs, transclude) {return {pre: function (scope, iElement, iAttrs, controller) {...}, post: function (scope, iElement, iAttrs, controller ){...}} return function postLink (...) {...}}};});Instructions can be used in the following ways:
restrict[string]Restrict is an optional parameter. Specifies the form in which the command is declared in the DOM. The default value is A, which is declared as an attribute.
Optional values:
replace[bool]
Replace is an optional parameter. If this parameter is set, the value must be true because the default value is false. The default value indicates that the template is inserted into the element that calls this command as a child element,
For example, if the default value of the preceding example is true, the generated html code is as follows:
<My-directive value = "http://www.baidu.com" text = "Baidu"> <a href = "http://www.baidu.com" rel = "external nofollow"> Baidu </a> </my-directive>
If replace = true is set
<A href = "http://www.baidu.com" rel = "external nofollow" value = "http://www.baidu.com" text = "Baidu"> Baidu </>
As I have observed, this effect only works when restrict = "E" is set.
template[string or function]
The template parameter is optional and must be set to one of the following two forms:
A piece of HTML text;
A function that accepts two parameters, tElement and tAttrs, and returns a string representing the template. T in tElement and tAttrs represents the template, which is relative to the instance.
Whether the returned html text or function is replaced with an html, and used together with the replace attribute, a complete index. heml directive. js is provided first. This is an example:
<!doctype html>Then js:
Angular. module ('app', []). directive ('myctive', function () {return {restrict: 'E', template: '<a href = "http://www.baidu.com" rel = "external nofollow"> Baidu </a> '};})The final running effect and the effect of firebug:
If the replace attribute of the add command is true, this directvie instruction part will not exist:
The above is the difference.
Besides, the template parameters in the instruction definition are functions. We rewrite html and js:
<! Doctype html>Attributes in the response:
Attr. value and attr. text correspond:
<My-directive value = "http://www.baidu.com" text = "Baidu"> </my-directive>Value and text.
No replace:
Ii. Use commands as attributes
As mentioned above:
Angular. module ('myapp', []). direve ve ('myctive', function () {return {restrict: String, which is omitted laterCommand restrict can be used in four ways. The default value is A, which is used as an attribute,
Then, if a command returns a function directly, a link function is actually returned, for example:
angular.module('time', []) .directive('xxx', function() { return function(scope, element, attrs) {
This indicates direct link.
When the command is used for attributes, there are two meanings:
1. Define attributes in an html Element
2. Command name defined by js.
Let's look at an example:
JS:
angular.module('time', []) .controller("Ctrl2", function($scope) { $scope.format = 'M/d/yy h:mm:ss a'; }) // Register the 'myCurrentTime' directive factory method. // We inject $timeout and dateFilter service since the factory method is DI. .directive('myCurrentTime', function($timeout, dateFilter) { // return the directive link function. (compile function not needed) return function(scope, element, attrs) { var format, // date format timeoutId; // timeoutId, so that we can cancel the time updates // used to update the UI function updateTime() { element.text(dateFilter(new Date(), format)); } // watch the expression, and update the UI on change. scope.$watch(attrs.myCurrentTime, function(value) { format = value; updateTime(); }); // schedule update in one second function updateLater() { // save the timeoutId for canceling timeoutId = $timeout(function() { updateTime(); // update DOM updateLater(); // schedule another update }, 1000); } // listen on DOM destroy (removal) event, and cancel the next UI update // to prevent updating time ofter the DOM element was removed. element.bind('$destroy', function() { $timeout.cancel(timeoutId); }); updateLater(); // kick off the UI update process. } });
Then index.html:
<!doctype html>Note:Ng-app = "time" must be specified as time. Otherwise, it cannot be associated.
The analysis is as follows:
<span my-current-time="format"></span><input ng-model="format">my-current-time="format"Correspondingly, the html is connected with a broken number, and the command is the myCurrentTime (lower-case first) Like a camper)return function(scope, element, attrs) {scope.$watch(attrs.myCurrentTime, function(value) { updateTime()The function directly writes elem. text.Summary
The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.
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
