In Angular. JS, the instruction reference template and instruction are described as attributes. angular. jstemplate

Source: Internet
Author: User

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:

  • E (element) <my-directive> </my-directive>
  • A (attribute, default value) <div my-directive = "expression"> </div>
  • C (class Name) <div class = "my-directive: expression;"> </div>
  • M (comment) <-- directive: my-directive expression -->

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 later

Command restrict can be used in four ways. The default value is A, which is used as an attribute,

  • E (element) <my-directive> </my-directive>
  • A (attribute, default value) <div my-directive = "expression"> </div>
  • C (class Name) <div class = "my-directive: expression;"> </div>
  • M (comment) <-- directive: my-directive expression -->

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:

  • Specify an attribute for span and bind it to the format in the scope.
  • <span my-current-time="format"></span>
  • Defines the input box and binds the format in the scope.
  • <input ng-model="format">
  • The controller -- Ctrl2 is defined, the scope is introduced, and the variable format is defined.
  • Defines the command myCurrentTime, and then corresponds tomy-current-time="format"Correspondingly, the html is connected with a broken number, and the command is the myCurrentTime (lower-case first) Like a camper)
  • The three parameters of the link function and the use of attrs:
    return function(scope, element, attrs) {scope.$watch(attrs.myCurrentTime, function(value) {
  • As you can see, myCurrentTime is both the command name and the attribute name in this span element. Its value is the real value of format.
  • Use firebug to see:
  • When a command is used as an attribute and does not have a replace function, it will not be replaced or inserted, that is, an attribute. The subsequent date value is actuallyupdateTime()The function directly writes elem. text.
  • The role of the command as an attribute here is to extend the function of the current element.

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.