Angularjs custom Control Instance detailed _angularjs

The example in this article describes the Angularjs custom control. Share to everyone for your reference, specific as follows:

Introduction to Custom Directives

The angularjs instruction function is to manipulate Html rendering in the ANGULAJS application. For example, the interpolation instruction ({{}}), the ng-repeat instruction, and the ng-if instruction.

Of course, you can also achieve your own. This is Angularjs's so-called "Church HTML play New posture". This article will show you how to do it.

Instruction type

The following types of directives can be customized:

Elements
Property
CSS class
Comment directives

In this case, ANGULARJS strongly recommends that you use element and attribute types, rather than CSS class and comment directives (unless forced).

The instruction type determines when the instruction is activated. When Angularjs finds an HTML element in the HTML template, the element instruction is activated. The property directive is activated when Angularjs finds an HTML element attribute. When Angularjs finds a CSS class, the CSS class instruction is activated, and finally, when Angularjs finds the HTML comment, comment directive is activated.

Basic examples

You can register a command with the module, like this:

<!--lang:js-->
MyApp = Angular.module ("MyApp", []);
Myapp.directive (' div ', function () {
  var directive = {};
  directive.restrict = ' E '; /* Restrict this directive to elements * *
  directive.template = "My A-directive: {{Texttoinsert}}";
  return directive;
});

See the Directive () function called in the module. When you call the function, it means that you want to register a new command. The first parameter of the directive () function is the name of the new registration directive. This is the name that you use when you call it in the HTML template. In the example, I used the ' div ', which means that when the HTML template finds the HTML element type to be a div, the instruction will be activated.

The second argument passed to the directive function is a factory function. Calling the function returns the definition of an instruction. Angularjs invokes the function to get the JavaScript object that contains the directive definition. If you have a closer look at the example above, you will know that it returns is really a Javascript object.

This Javascript object returned from the factory function has two properties: Restrict and Template fields.

The Restrict field is used to set when an instruction is activated, when it matches to an HTML element, or when it is matched to an element attribute. Which is the instruction type. When the restrict is set to E, only the HTML element named Div activates the directive. When restrict is set to a, only HTML element attributes named Div activate the directive. You can also use AE, which enables the command to be activated when matching the element name and element attribute names.

The template field is an HTML template used to replace a matching div element. It takes the matching div as a placeholder and replaces it with an HTML template in the same place. In other words, the HTML template replaces the matching HTML element.

For example, your HTML page has such a section of HTML:

<!--lang:js-->
<div ng-controller= "Mycontroller" >
  <div>this div would be replaced</div& gt;
</div>

When Angularjs finds the embedded Div, it activates the custom instruction. The DIV element is then replaced, and the replaced HTML becomes this:

<!--lang:js--> my
directive: {{Texttoinsert}}

And then you see that this HTML contains an interpolation instruction ({{Texttoinsert}}). The ANGULARJS will be executed again so that the interpolation instruction actual value is displayed. Then $scope. Texttoinsert property will replace the interpolation instruction placeholder at this HTML point.

Template and Templateurl Properties

The simplest example of creating a custom directive is this. Your instructions are used to generate HTML, and then you place the HTML in the template attribute of the instruction definition object. The following example is the repetition of the simplest example above, paying attention to the template section:

<!--lang:js-->
MyApp = Angular.module ("MyApp", []);
Myapp.directive (' div ', function () {
  var directive = {};
  directive.restrict = ' E '; /* Restrict this directive to elements * *
  directive.template = "My A-directive: {{Texttoinsert}}";
  return directive;
});

If the HTML template is growing larger, it must be very difficult to maintain it in a Javascript string. You can put it in a separate file, and then Angularjs can load it in through the file. The URL of the HTML template file is then placed in the Templateurl attribute of the instruction definition object. Here is an example:

<!--lang:js-->
MyApp = Angular.module ("MyApp", []);
Myapp.directive (' div ', function () {
  var directive = {};
  directive.restrict = ' E '; * Restrict this directive to elements * *
  Directive.templateurl = "/myapp/html-templates/div-template.html";
  return directive;
});

Angularjs then loads the HTML template in from the URL set in the Templateurl property.

Setting the Templateurl property with a standalone HTML template file is more useful when you want to create more generic directives, such as instructions for displaying user information. Example:

<!--lang:js-->
MyApp = Angular.module ("MyApp", []);
Myapp.directive (' UserInfo ', function () {
  var directive = {};
  directive.restrict = ' E '; * Restrict this directive to elements * *
  Directive.templateurl = "/myapp/html-templates/userinfo-template.html"; c6/>return directive;
});

Example creates an instruction that activates the ANGULARJS when it finds a <userinfo> element. Angularjs loads a template that points to/myapp/html-templates/userinfo-template.html and parses it, just as it was embedded in the previous HTML file from the beginning.

Isolate the $scope from the directive

In the example above, the USERINFO directive is hard bound to the $scope because the HTML template refers directly to the Texttoinsert attribute. Direct reference $scope It is very difficult to reuse a command when it is in the same controller, because the value of $scope in the same controller is the same. For example, when you write this in the HTML of a page:

<!--lang:js-->
<userinfo></userinfo>
<userinfo></userinfo>

These two <userinfo> elements are replaced by the same HTML template and then bound to the same $scope variable. The result is that two <userinfo> elements will be replaced with exactly the same HTML code.

To bind two <userinfo> elements to different values in the $scope, you need to give the HTML template a isolate scope.

The so-called isolate scope is a separate scope object bound to the instruction. The following are examples of definitions:

<!--lang:js-->
myapp.directive (' UserInfo ', function () {
  var directive = {};
  directive.restrict = ' E ';
  Directive.template = ' User: {{user.firstname}}} {{user.lastname}} ';
  Directive.scope = {
    User: "=user"
  } return
  directive;
})

See the two interpolation directives {{User.firstname}}} and {{user.lastname}} in the HTMl template. Note User. Part. and the Directive.scope property. Directive.scope is a Javascript object with the user attribute. So Directive.scope became the isolate scope object, and now the HTML template is tied to the directive.scope.user (through the {{User.firstname}} and {{User.lastname}}} directives).

Directive.scope.user is set to "=user". It means that directive.scope.user and the attributes in scope are bound together (not isolate scope), and the properties in scope pass the user property to the <userinfo> element. It sounds like a lot of fun, just look at the example:

<!--lang:js-->
<userinfo user= "Jakob" ></userinfo>
<userinfo user= "John" ></ Userinfo>

All two <userinfo> elements have the user attribute. The value of user points to an attribute with the same name in the $scope, and the properties in the specified $scope are used in the isolate scope object of UserInfo.

Here's a complete example:

<!--lang:js-->
<userinfo user= "Jakob" ></userinfo>
<userinfo user= "John" ></ userinfo>
<script>
myapp.directive (' UserInfo ', function () {
  var directive = {};
  directive.restrict = ' E ';
  Directive.template = "User: <b>{{user.firstName}}</b> <b>{{user.lastName}}</b>";
  Directive.scope = {
    User: "=user"
  } return
  directive;
});
Myapp.controller ("Mycontroller", Function ($scope, $http) {
  $scope. Jakob = {};
  $scope. Jakob.firstname = "Jakob";
  $scope. Jakob.lastname = "Jenkov";
  $scope. John = {};
  $scope. John.firstname = "John";
  $scope. John.lastname = "Doe";
});
</script>

Compile () and link () functions

If you need to do more advanced work in your instructions, you may consider using the compile () and link () functions when you simply cannot do it using HTML templates.

The compile () and link () functions define how directives modify the HTML that is matched to.

The compile () function is invoked when the instruction was first compiled by ANGULARJS (first discovered in HTML). The compile () function will be configured once for this element.

The compile () function is then used to return link () as the end. The link () function is invoked each time the element is bound to $scope data.

Here is an example:

<!--lang:js-->
<script>
MyApp = Angular.module ("MyApp", []);
Myapp.directive (' UserInfo ', function () {
  var directive = {};
  directive.restrict = ' E '; /* Restrict this directive to elements * *
  directive.compile = function (element, attributes) {
    //do one-time confi Guration of element.
    var linkfunction = function ($scope, element, atttributes) {
      //bind element to data in $scope
    } return
    LINKF unction;
  }
  return directive;
});
</script>

The compile () function takes two parameters: element and attributes.

The element parameter is a jqlite-wrapped DOM element. Angularjs has a simplified version of jQuery that can be used to manipulate the DOM, so the DOM operation of the element is the same as what you know in JQuery.

The attributes parameter is a Javascript object that contains all of the property collections in the DOM element. So, you have to access a property that you can write Attributes.type.

The link () function takes three parameters: $scope, element, and attributes. element and attributes parameters are the same as those passed into the compile () function. $scope parameter is a normal scope object, or when you define isolate scope in the instruction definition object, it is isolate scope.

The naming of compile () and link () is rather confusing. They must have been inspired by the compilation team. I can see similarities, but a compiler is passed in once and then output. The instruction is to configure the HTML element once and then update the $scope object when it changes.

The compile () function may be better if it is called create (), init (), or configure (). This can express the meaning that this function will only be invoked once.

The link () function, if called bind () or render (), might be better able to express the meaning that the function will be invoked when the instruction binds the data or binds the data.

The following is a complete example that shows the instructions using the compile () and link () functions:

 <!--lang:js--> <div ng-controller= "Mycontroller" > <userinfo >This
  would be replaced</userinfo> </div> <script> MyApp = Angular.module ("MyApp", []);
    Myapp.directive (' UserInfo ', function () {var directive = {}; directive.restrict = ' E '; /* Restrict this directive to elements * * Directive.compile = function (element, attributes) {element.css ("Borde
      R "," 1px solid #cccccc "); var linkfunction = function ($scope, element, attributes) {element.html ("This is the new content:" + $scope.
        Name);
      Element.css ("Background-color", "#ffff00");
    return linkfunction;
  return directive;
    }) Myapp.controller ("Mycontroller", Function ($scope, $http) {$scope. CssClass = "Notificationdiv";
    $scope. FirstName = "Jakob";
    $scope. DoClick = function () {Console.log ("DoClick () called");
}
  }); </script> 

The compile () function sets the border of the HTML element. It executes only once, because the compile () function executes only once.

Link () Replaces the content of the HTML element and sets the background color to yellow.

Put the setting border on the compile () and put the background color on link () for no particular reason. You can throw all the operations into the compile () or all of them into link (). If all are put into compile () they will only be set once (you need them to be constant). If you put the link (), they will change every time the HTML element is tied to the $scope. This is useful when you want to set boarder and background colors based on the data in the $scope.

Set link () function only

Sometimes your instructions may not require compile (). You only need to use link (). In this case, you can directly set the link () function in the instruction definition object. Here is a modification to the example above, using only the link function:

<!--lang:js-->
<div ng-controller= "Mycontroller" > <userinfo >this would be
  replaced</ userinfo>
</div>
<script>
  MyApp = Angular.module ("MyApp", []);
  Myapp.directive (' UserInfo ', function () {
    var directive = {};
    directive.restrict = ' E '; /* Restrict this directive to elements * *
    Directive.link = function ($scope, element, attributes) {
        element.html ( "This is the new content:" + $scope. FirstName);
        Element.css ("Background-color", "#ffff00");
    }
    return directive;
  })
  Myapp.controller ("Mycontroller", Function ($scope, $http) {
    $scope. CssClass = "Notificationdiv";
    $scope. FirstName = "Jakob";
    $scope. DoClick = function () {
      Console.log ("DoClick () called");
    }
  );
</script>

Note that the link () method is exactly the same as the link () returned in the previous example.

Instructions for encapsulating elements through transclusion

All of the examples we've seen so far have been to replace the content of the matching elements with the specified content of the instruction, whether through Javascript or HTML templates. But what if there are parts of the content that developers can specify? For example:

<!--lang:js-->
<mytransclude>this is a transcluded directive {{firstname}}</mytransclude>

An element marked as <mytransclude>, some of which can be set by the developer. Therefore, this part of HTML should not be replaced by the HTML template for the instruction. We actually want this part of HTML to be handled by ANGULARJS. This process is called "transclusion". 1

To allow Angularjs to put this part of HTML into the instruction, you must set the Transclude property of the directive definition object to be true. You also need to tell Angularjs which part of the instruction's HTML template needs to include transcluded HTML. You can mark the element that you want to add transcluded HTML by inserting the Ng-transclude attribute (actually, an instruction) into the HTML element of the HTML template.

Here is a ANGULARJS instruction that demonstrates how to use transclusion:

<!--lang:js-->
<mytransclude>this is a transcluded directive {{firstname}}</mytransclude>
<script>
  MyApp = Angular.module ("MyApp", []);
  Myapp.directive (' Mytransclude ', function () {
    var directive = {};
    directive.restrict = ' E '; * Restrict this directive to elements * *
    directive.transclude = true;
    Directive.template = "<div class= ' mytransclude ' ng-transclude></div>";
    return directive;
  });
  Myapp.controller ("Mycontroller", Function ($scope, $http) {
    $scope. firstName = "Jakob";
  });
</script>

Note the HTML within the <mytransclude> element. This part of the HTML code contains the interpolation instruction {{firstName}}. We want ANGULARJS to handle this part of HTML for us and let the interpolation instructions execute. To achieve this, I set the transclude to true in the instruction definition object. I also used the Ng-transclude attribute in the HTML template. This property tells Angularjs what elements need to be inserted into transcluded HTML.

1: To tell the truth, I did not understand that definition, said too TM difficult to understand, and I am not cool write code does not output tutorial. I had to do my own example. I think it should be like this, the target element content as a whole, get the HTML template to add to the ng-transclude specified under the tag. This processing, I think should be called transcluded. For example, just the examples (some bugs, fixed themselves), because directive.transclude = true; , so the HTML inside the original <mytransclude> element:

<!--Lang:js--> This is
a transcluded directive {{FirstName}}

When the command ' mytransclude ' is activated, it will be taken to the template of the ' mytransclude ' instruction and placed in the ng-transclude specified

<!--lang:js-->
"<div class= ' mytransclude ' ng-transclude></div>"

In The result of the final output should be:

<!--lang:js-->
<mytransclude>
  <div class= ' mytransclude ' ng-transclude>
    <span class= "Ng-scope ng-binding" >this is a transcluded directive jakob</span>
  </div>
</ Mytransclude>

More readers interested in ANGULARJS related content can view the site topics: "Angularjs Introduction and Advanced Tutorials" and "ANGULARJS MVC Framework Summary"

I hope this article will help you to Angularjs program design.