[AngularJS] - 8 custom instruction

2019 Unicorn Enterprises heavily recruiting engineers Python standard >>>

AngularJS supports user-defined label attributes, without the need to use DOM node operation, add custom content.

Four of the aforementioned characteristics AngularJS:

　　1 MVC

　　2 Modular

　　3 instruction

　　4 two-way data binding

The following will covers the following topics:

　　1 How to customize instruction

　　2 using a custom command

　　3 using a custom built instruction

　　How to customize instruction:

　　Angular frame module is based on, so be sure to come create your own modules:

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

　　Then create command directive on the basis of this module

myAppModule.directive("xingoo",function(){
                return{
                    restrict:'AECM',
                    template:'<div>hello my directive</div>',
                    repalce:true
                }
            });

　　Which, xingoo is our custom tag name, followed by its method functions.

　　Return of a function key combination, which defines the use of tags, attributes, and so content.

　　Then take a look at what it defines it:

　　1 restrict: defines the use of tags, a total of four, namely is AECM

　　2 template: template definition labels. Which is used to replace the label from the string definitions

　　3 repalce: whether to support replacement

　　4 transclude: whether to support embedded

　　How to use the command:

　　Use of the above-mentioned four labels, i.e. AECM.

　　A attribute properties: property to use as a

<div xingoo></div>

　　E element elements: elements used as labels

<xingoo></xingoo>

　　C class category: as the CSS styles to use

<div class="xingoo"></div>

　　M comments Note: Note as used (version 1.2 in this manner is unavailable affinity measured!)

<!-- directive:xingoo -->
<div></div>

　　Generally recommended, as attributes and elements to use.

　　When it is desired extended attribute in the existing html tags, by way of properties.

　　When you want a custom label, in the form of labels.

　　That way you want to use must be declared inside the letter corresponding to restrict the definition of the directive.

　　Built using instructions:

　　Because the tags can be nested inside other tags, so you want to be nested in other elements label custom label, you need:

　　1 using transclude property set to true.

　　Using 2 ng-transclude properties, defined inside the nested position.

　　code show as below:

myAppModule.directive("test",function(){
                return{
                    restrict:'AECM',
                    transclude:true,
                    template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
                }
            });

　　All codes

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>
        
        <xingoo></xingoo>
        <div xingoo></div>
        <div class="xingoo"></div>
        <!-- directive:xingoo -->
        <div></div>
        <hr>
        <xingoo>3333</xingoo>
        <hr>
        <test>4444</test>


        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);

            myAppModule.directive("xingoo",function(){
                return{
                    restrict:'AECM',
                    template:'<div>hello my directive</div>',
                    repalce:true
                }
            });

            myAppModule.directive("test",function(){
                return{
                    restrict:'AECM',
                    transclude:true,
                    template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
                }
            });
        </script>
    </body>
</html>

　　operation result

Reproduced in: https: //my.oschina.net/u/204616/blog/545170