Interactive explanation of Angularjs instruction and instance code _ANGULARJS

Source: Internet
Author: User

Background information

This example is a video example, there is a dynamic Superman, there are three kinds of ability, power strength, speed speed, luminous light.

These three abilities, as three attributes, define motion Superman as a label that can have the ability to add a corresponding attribute.

To facilitate the presentation of the results, add a mouse response event to the tag, and when the mouse is moved to the corresponding label, a method is triggered to print out the ability.

Program Analysis
The code for the HTML section is as follows:

 <div>
      <superman>nothing!</superman>
      <superman Strength >strength!</superman >
      <superman Strength speed >strength speed!</superman> <superman strength speed
      Light > Strength Speed light!</superman>
    </div>

Let's look at how to do this, and still create a module first:

var myappmodule = angular.module ("myApp", []);

On the basis of the module, create a label Superman, similar to the previous.

Myappmodule.directive ("Superman", function () {
        return{
          scope:{},
          restrict: ' AE ',
          transclude:true,
          Template: "<div><div ng-transclude></div></div>",
          controller:function ($scope) {
            $scope. abilities = [];
            This.addstrength = function () {
              $scope. Abilities.push ("Strength");
            This.addspeed = function () {
              $scope. Abilities.push ("Speed");
            This.addlight = function () {
              $scope. Abilities.push ("Light");}
          ,
          link:function (scope, element,attr) {
            element.bind ("MouseEnter", function () {
              console.log (scope.abilities);
            });
          }
      });

The difference here is that there is a controller attribute within the method, which is not a Ng-controller controller, but an interface to the open door, the method declared inside can be used externally as a public method, and other instructions can be used by relying on the method.

Next, create three instructions for the ability.

    Myappmodule.directive ("Strength", function () {
        return{
          require: ' ^superman ',
          link:function (scope, Element,attr,supermanctrl) {
            supermanctrl.addstrength ();}}}
      );
      Myappmodule.directive ("Speed", function () {
        return{
          require: ' ^superman ',
          link:function (scope, Element,attr,supermanctrl) {
            supermanctrl.addspeed ();}}}
      );
      Myappmodule.directive ("Light", function () {
        return{
          require: ' ^superman ',
          link:function (scope, Element,attr,supermanctrl) {
            supermanctrl.addlight ();}}}
      );

The code for three instructions is similar, where require specifies the dependent instruction.

Link in a more than a parameter Supermanctrl, this parameter conjecture is Superman in the controller, so name the way to use Superman+ctrl.

"Because I don't know the internal principle, this is just conjecture, but the experiment proves that if you change the name of this parameter, you will get an error." 】

By declaring these three instructions, you can use these three instructions as super properties, and when annotated with this attribute, the internal link method is triggered and the method exposed in the Superman is invoked.

 To sum up, the interactive process of an instruction:

1 first create a basic instruction, after the controller attribute, add the method of exposing to the outside world.

2 Create other interactive instructions, add the corresponding instruction dependencies after the Require property, and invoke the exposed method in link

All program code:

<!doctype html>  
 
 

Run Result:

The above is the ANGULARJS instruction of the interactive data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!

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.