Home > Developer > Web Develop
Directory
The instructions in angular are the most complicated piece.
But that's what our upload component can write.
:
API OverviewFirst, 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.bootstrapgithub: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 directivesFor Restrict,template,replace,transclude is not complicated, this section does not do too much to repeat.
ScopeScope 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.
LinkWhen 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):
RequireRequire 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
