"AngularJS" 5 examples of detailed directive (instruction) mechanism

"AngularJS" 5 examples of detailed directive (instruction) mechanism

This article has organized and expanded the contents of the sixth chapter of the book "AngularJS", which will be published by the electronic industry press recently, please expect password: Angular

1. A little note

The role of directives: implementing semantic tagging

The HTML tags we use are like this:

<div>    <span>一点点内容</span></div>

and using Angularjs's directive (instruction) mechanism, we can implement something like this:

<tabpanel>    <panel>子面板1</panel>    <panel>子面板2</panel></tabpanel>

Many people may want to exclaim, this goods and JSP or struts and so on the framework of taglib very much like Ah!

Well, to be honest, that's actually the case, except that this is done using JavaScript. Because of this, so many taglib do not function, use it can be done, such as access to the N-level scope inside the objects such as things (see the following 5th example).

2. Example 1: From the simplest start

For the essentially, to replace ).

Look at this warm JS code:

var appModule = angular.module(‘app‘, []);appModule.directive(‘hello‘, function() { return { restrict: ‘E‘, template: ‘<div>Hi there</div>‘, replace: true };});

The above code may look at two eyes on it, do not care too much about the details.

Then we can see something like this in the browser:





The actual resulting label structure is this:





Can see,





OK, after reading the above table, for restrict this attribute believe that you have a second understand, then let's play some tricks. If we need to replace the HTML tag is very long, obviously can not be used in the way of stitching strings, we can use Templateurl to replace the template, so that you can write the templates into a separate HTML file.

3. Example 2:transclude (transform)

First look at the example, JS code:

var appModule = angular.module(‘app‘, []);    appModule.directive(‘hello‘, function() {    return {        restrict: ‘E‘,        template: ‘<div>Hi there <span ng-transclude></span></div>‘,        transclude: true    };});

HTML code:

The results are as follows:





The resulting HTML tag structure is as follows:





Compared with the first example, the JS and HTML code of this example are slightly different, JS code inside a transclude:true,html code inside the

As we have said in the first example, the purpose of the directive is to replace our custom semantic tags with HTML tags that the browser can recognize . Well, what if we have child tags inside our custom tags? Obviously, transclude is used to deal with this situation.

For the current example, Transclude's role can be easily understood as: replace the remains the same .

Obviously, because we don't have the replace:true option, the

You can add replace:true to the JS code above and then look at the generated HTML structure.

4. Example 3: About compile and link

JS Code:

var appModule = angular.module(‘app‘, []);appModule.directive(‘hello‘, function() {    return {        restrict: ‘E‘,        template: ‘<span>Hi there</span>‘,        replace: true    };});appModule.controller(‘MyController‘,function($scope) {    $scope.things = [1,2,3,4,5,6];});

HTML code:

Well, this example is used to explain a little bit of theory, so simply looking at the effect may not see a bird.

As mentioned earlier, the nature of the instruction is actually a replacement process. Well, in that case, how did the angular replace it? Well, the process is divided into 2 stages, that is, the compile (compile) and link (link) mentioned in the title of this section.

In short, the compile phase of the tag parsing and transformation, link phase of data binding operations. The more detailed processing here, please refer to the "AngularJS" in the Book of the analysis, here will not repeat (er, actually because the explanation is very long and troublesome, uncle too lazy to say here

）。

So, what's the use of this thing?

For example, if you have some events that need to be bound to an element, then you need to provide a link function, see the next example.

5. Example 4: A more complicated example expander

This is an example provided in the book "AngularJS", but the book does not give the complete code to run, so here is a reference for you.

JS Code:

var expanderModule=angular.module(‘expanderModule‘, [])expanderModule.directive(‘expander‘, function() {    return {        restrict : ‘EA‘,        replace : true,        transclude : true,        scope : {            title : ‘=expanderTitle‘        },        template : ‘<div>‘                 + ‘<div class="title" ng-click="toggle()">{{title}}</div>‘                 + ‘<div class="body" ng-show="showMe" ng-transclude></div>‘                 + ‘</div>‘,        link : function(scope, element, attrs) {            scope.showMe = false;            scope.toggle = function toggle() {                scope.showMe = !scope.showMe;            }        }    }});expanderModule.controller(‘SomeController‘,function($scope) {    $scope.title = ‘点击展开‘;    $scope.text = ‘这里是内部的内容。‘;});

HTML code:

CSS code:

.expander { border: 1px solid black; width: 250px;}.expander>.title { background-color: black; color: white; padding: .1em .3em; cursor: pointer;}.expander>.body { padding: .1em .3em;}

The results are as follows:





Note The JS code inside this paragraph:

link : function(scope, element, attrs) { scope.showMe = false; scope.toggle = function toggle() { scope.showMe = !scope.showMe; }}

Run a run of their own examples, research, not much explanation.

6. Example 5: A comprehensive example

JS Code:

var expmodule=angular.module (' Expandermodule ', []) expmodule.directive (' accordion ', function () {return {Restrict        : ' EA ', replace:true, transclude:true, Template: ' <div ng-transclude></div> ',            Controller:function () {var expanders = [];                    this.gotopened = function (selectedexpander) {Angular.foreach (expanders, function (expander) {                    if (selectedexpander! = Expander) {Expander.showme = false;            }                });            } This.addexpander = function (expander) {Expanders.push (expander);        }}}); Expmodule.directive (' Expander ', function () {return {restrict: ' EA ', replace:true,        Transclude:true, require: ' ^?accordion ', scope: {title: ' =expandertitle '}, Template: ' <div> ' + ' <div class= ' title 'ng-click= "Toggle ()" >{{title}}</div> ' + ' <div class= "body" ng-show= "showMe" ng-transclude>            </div> ' + ' </div> ', link:function (scope, element, Attrs, Accordioncontroller) {            Scope.showme = false;            Accordioncontroller.addexpander (scope);                Scope.toggle = function Toggle () {scope.showme =!scope.showme;            accordioncontroller.gotopened (scope); }}}); Expmodule.controller ("Somecontroller", function ($scope) {$scope. expanders = [{title: ' Click    Me to expand ', Text: ' Hi there folks, I'm the content that's hidden but it's now shown. '  }, {title: ' Click This ', text: ' I am even better text than you have seen previously '}, {title : ' Test ', Text: ' Test '}];});

HTML code:

CSS code:

.expander { border: 1px solid black; width: 250px;}.expander>.title { background-color: black; color: white; padding: .1em .3em; cursor: pointer;}.expander>.body { padding: .1em .3em;}

Operating effect:





The main difficulty with this example is how to access the data in the outer accordion scope in the sub-expander, which is slightly more complex to explain, and is not unfolded here, in detail in the book "AngularJS"



ANGULARJS Official site is here: http://angularjs.org/

[end of full text]

"AngularJS" 5 examples of detailed directive (instruction) mechanism