Home > Developer > Web Develop
Today, I finally summon up the courage to write their own blog, excitement and fear coexist, I hope you can criticize the guidance, if you can help everyone, but also hope that you have a praise!!
With ANGULARJS work also has a period of time, the overall feeling most challenging or instruction, because no instruction angularjs is only bone frame, although there are many third-party directives, such as: angular bootstrap,ng-table, etc., But according to the requirements of the interface design, they are far from satisfied, how to do?? The answer is only to write yourself (or Google, but for a small feature, to introduce a large file, I do not advocate.) If the boss wants you to change every now and then, I think you will collapse, whether you want to resign the idea, in order to make the work meaningful and improve their level, or in the case of sufficient time to write it yourself! ), then let's start now!
Start with an entry-level command today: Click on the button, join loading, block the Click again (this is useful when submitting a form, Ajax requesting data);
Own small try Sledgehammer, wrote one (although many Google).
1 <!DOCTYPE HTML>2 <HTMLNg-app= "MYAPP">3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title></title>6 <Linkhref=".. /.. /bower_components/bootstrap/dist/css/bootstrap.min.css "rel= "stylesheet">7 <Scriptsrc=".. /.. /bower_components/angular/angular.js "></Script>8 </Head>9 <BodyNg-controller= "Myctrl">Ten <Buttonclass= "Btn btn-primary"Btn-loading-text= "Loading"trigger-loading= "Beginloading"Ng-click= "Toggleload ()">Load</Button> One <Buttonclass= "Btn Btn-default"Ng-click= "Toggleload ()">Toggle Button State</Button> A </Body> - <Script> - Angular.module ('mydirectives',[]) the . Directive ('triggerloading',function(){ - return { - Restrict:'A', - Link:function(scope,element,attr) { + Scope.prevtext=Element.text (); - scope. $watch (function(){ + returnscope. $eval (attr.triggerloading); A },function(value) { at if(angular.isdefined (value)) { - //element.toggleclass (' disabled ', value); - value?element.attr ('Disabled',true): Element.removeattr ('Disabled'); - Element.text ((Value?attr.btnLoadingText:scope.prevText)); - } - }); in } - } to }); + Angular.module ('myApp',['mydirectives']) - . Controller ('Myctrl',['$scope',function($scope) { the $scope. Toggleload=function(){ * $scope. beginloading=!$scope. beginloading; $ };Panax Notoginseng }]); - the </Script> + </HTML>
You can copy the run, the hint: you need to modify the path of the introduced file.
This command function is very simple just click join loading state, how disdain with this function, then don't look down , directly praise it, thank you!
Instructions for this thing, the format needs to be remembered.
Next time, first talk about ". directive ()", thank you for your attention!
Step into ANGULARJS directive (instruction)--click the button to add the loading configuration
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
