[AngularJS] ANGULARJS Series (4) Intermediate instruction

Source: Internet
Author: User

Directory

    • API Overview
    • Using Angular.UI.Bootstrap
    • Custom directives
      • Scope
      • Link
    • My orders.

The instructions in angular are the most complicated piece.

But that's what our upload component can write.

:

API Overview

First, a pseudo-code:

Angular.module (' ModuleName ', []). directive (' namespacedirectivename ', [function () {return { Restrict: ",//describes how the instruction is used in the template, including the element e, the attribute A,css style class, the annotation or any of the above methods, and the order in which the instructions are executed in the template, in order of As opposed to other directives, Template: ",//write an inline template as a string, if the template is provided as a URL, this property is ignored Templateurl: ',//describes the loading template The desired URL. If a template is provided in temlate form, this property is ignored replace:true,//if set to True replaces the element that contains the instruction, or appends to the element inside Transclude:true  ,//To move the original child node of the instruction element to a new template internal scope: ' bool or object ',//create a new scope for the current instruction instead of inheriting it from the parent scope Constroller                : function ($scope, $element, $attrs, $transclude) {//Create a controller that exposes an API that can communicate between multiple instructions using this API                    }, require: ',//requires another instruction must exist for the current instruction to execute link:function (scope, ielement, iattrs) { Programmatically modifies an instance of the resulting DOM element, adds an event listener, and sets the data binding}, Compile:function (TElement, t Attrs, transclude{//Use Ng-repeat to programmatically modify the DOM template to implement an instruction that spans multiple instructions. You can also return a link function that you can use to modify an example of the resulting element, return {pre:function prelink (scope, ielement, Iattrs, controller) {}, Post:function post                Link (Scope, ielement, Iattrs, controller) {}}        }            }; } ]);

Here are a few of the key definitions

Restrict: Describes how instructions are used in a template, including: Elements, style classes, attributes, annotations, or any combination of these methods. (AE is default)

Using Angularui.bootstrap

github:https://angular-ui.github.io/bootstrap/

Nuget:

Install-package Angular.UI.Bootstrap (the library under the Bootstrap3.3.7 test Pass, here by the way, the band tpls.js in the bag is actually the JS that comes with the template)

Here is a demonstration of one of the most commonly used pager

    <link href= "Content/bootstrap.min.css" rel= "stylesheet"/>

More plugins that require ui-bootstrap access to the corresponding GitHub Pages

Custom directives

For Restrict,template,replace,transclude is not complicated, this section does not do too much to repeat.

Scope

Scope Default false: Indicates the use of an existing scope

Set to True: Indicates the new scope (the property that inherits the parent scope)

Set to {}: Represents a separate scope (default access to the property of the parent scope)

When set to object {}, the properties of the parent scope can be passed through a binding policy

When scope is true and default false, observe H2 content to see the effect

<body ng-app= "myApp" ng-init= "user= ' aaa '" >    

  

When we explore the scope for the object, in the above example, make the adjustment, using the binding policy @

    <span hello= "{{user}}" ></span>    <script>        angular.module (' myApp ', [])            . Directive (' Hello ', [function () {                return {                    scope: {                        User: ' @hello '                    },                    Template: ' <span>hello-{{user}} </span> ',                    link:function ($scope) {                        $scope. user = ' CCC ';}}            ]);    </script>

The result is the same as when the scope is false, in fact, it is completely independent of the scope

We re-adjust the binding policy to =

    <span hello= "User" ></span>
    return {                    scope: {                        User: ' =hello '                    },                    Template: ' <span>Hello-{{user}}</span> ',                    Link: function ($scope) {                        $scope. user = ' CCC ';                    }                }

Finally we look at the &

<body ng-app= "myApp" ng-controller= "Helloctrl" >    <span func= "log (AA,BB)" ></span>    < script>        angular.module (' myApp ', []). Controller (' Helloctrl ', function ($scope) {            $scope. log = function ( Name, age) {                console.log (' Hello: ' + name + ': ' + ')}        ). directive (' hello ', [function () {            return {                scope: {                    func: ' & '                },                Template: ' <span Ng-click= "func ({aa:\ ' small 2\ ', bb:\ ' 19 years old \ '})" >click me</span> ",                link:function ($scope) {                    $scope. User = ' CCC ';                    $scope. Func ({aa: ' small m ', BB: ' 18 years old '});}}        ]);    </script></body>

I think of this, scope is OK.

Link

When it comes to link, I will always talk about compile, but I'll focus on controller,require here.

The link function fires once on each instance of the instruction.

Controller functions are typically used to pass data between instructions

The Require function relies on other directives

We come from the definition of a ' classic ' according
<body ng-app= "myApp" ng-init= "items=[{title: ' T1 ', text: ' X1 '},{title: ' T2 ', text: ' X2 '},{title: ' T3 ', text: ' X3 '}]" >    <div hello>        <div word title= "item.title" ng-repeat= "Item in Items" >{{item.text}}</div >    </div></body>

Define the Hello command first

        Angular.module (' myApp ', []). directive (' hello ', [function () {retur                        n {scope: {title: ' = '},                            Transclude:true, Replace:true, Controller:function () {                            var words = [];                            This.add = function (word) {words.push (word); } This.openone = function (word) {for (var i = 0; i < words. Length i++) {if (Words[i]!== word) words[i].show = FA                                Lse }}}, Template: ' <div ng-transclude></d Iv> '}}])

Word commands

    . directive (' word ', [function () {return {require: '? ^hello                        ', scope: {title: ' = '}, Transclude:true, replace:true, Template: ' <div><div ng-click= ' tog GLE () ">{{title}}</div><div ng-show=" show "ng-transclude></div></div>", L Ink:function (Scope, Ele, attr, ctrl) {if (!ctrl) {Console.wa                                RN (' No hello instruction ');                            Return                            } scope.show = false;                            Ctrl.add (scope);                                Scope.toggle = function () {scope.show =!scope.show;                            Ctrl.openone (scope);                      }  }                    }                }            ]); 

(This according is not too low):

Require

Require accepts a string or array of strings. The corresponding controller is injected into the 4th parameter of the link function.

The default is to find an order on the element you are looking for

Add ^ indicates that an instruction will be found from the parent

If not found, pass null to link

Usually in order to prevent the error, it will be "^" combination (not in sequence)

Here we add the Ngmodel. Because you often interact with the model.

This is the case of require: '? Ngmodel '.

Add the properties or methods commonly used by Ngmodelctrl:

$setViewValue (): Set Ngmodel value

$formatters: Formatting model display values

$render: Define how the model renders presentation methods

My orders.

Although angular already had a lot of instruction plugins, I couldn't help but write some instructions.

such as paging, file upload, Rich text and so on.

Share a fileinput that's written today.

Nuget:install-package Angularjs.fileinput

Github:https://github.com/nevercl/angular.fileinput

Also recommend a very detailed blog: http://www.cnblogs.com/rohelm/p/4051437.html

This address: http://www.cnblogs.com/neverc/p/5916247.html

[AngularJS] ANGULARJS Series (4) Intermediate instruction

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.