"Reprint" AngularJs Directive Directive of Controller,link,compile

Source: Internet
Author: User
Tags border color

With regard to the naming of custom directives, you can do whatever name you like, officially it is recommended to use [namespace-directive name] in such a way as Ng-controller. However, you must not use the ng-prefix, to prevent the same name as the system comes with the instructions. Another place to know, the command named with the hump rules, use-split the words. Such as: Define mydirective, use like this:<my-directive>.

The legal naming of directive is listed here:

    • Ng:bind
    • Ng-bind
    • Ng_bind
    • X-ng-bind
    • Data-ng-bind

I am a teacher, I should only enter a number when I enter a score on a new question, it is illegal to enter other content, and I hope this score is a number between 1~10. Can I add only one property to the input box? We define a directive called Fractionnum, as follows

1App.directive (' Fractionnum ',function(){  2     return {  3Link:function(scope, elements, Attrs, controller) {4Elements[0].onkeyup =function(){  5                 if(IsNaN ( This. Value) | | This. value<1 | | This. value>10){  6                      This. Style.bordercolor = ' Red '; 7                 }  8                 Else{  9                      This. Style.bordercolor = "; Ten                 }   One             };  A         }   -     };  -});

the value of link is a function used to define the behavior of the instruction. The current element can be obtained from the parameters passed in, and we can take the current element to the axe. Here I listen to the KeyUp event of the current element, get the value of the element, and if it is not a number between 1~10, turn the border color of the input box to red. This command is ready to work. The defined instructions can be used in the template, using the following methods:

  

Score: <input type="text" ng-model="question.fraction"

Controller,link,compile, what's the difference?

//directives.js Increase exampledirectivePhonecatdirectives.directive (' exampledirective ',function() {      return{restrict:E, Template:' <p>hello {{number}}!</p> ', Controller:function($scope, $element) {$scope. number= $scope. Number + "22222"; },          //controlleras: ' Mycontroller ',Linkfunction(Scope, El, attr) {Scope.number= Scope.number + "33333"; }, compile:function(element, attributes) {return{pre:functionPreLink (scope, element, attributes) {Scope.number= Scope.number + "44444"; }, Post:functionPostlink (scope, element, attributes) {Scope.number= Scope.number + "55555";          }              };    }      }  }); //controller.js AddDtcontrollers.controller (' directive2 ', [' $scope ',      function($scope) {$scope. number= ' 1111 ';    }  ]); //HTML<body ng-app= "Phonecatapp" > <div ng-controller= "directive2" > <example-directive></examp Le-directive> </div> </body>

Operation Result:

Hello 1111 22222 44444 55555!  

  

from the results can be seen, controller first run, compile run, link does not run (link is compile in the Postlink). Comment The compile in the previous example out of the running result:
Hello 1111 22222 33333!    

from the results can be seen, controller first run, link after the run, link and compile incompatible. Compile change the triggering and binding of Dom,link eventsOriginal Address http://hudeyong926.iteye.com/blog/2073488

"Reprint" AngularJs Directive Directive of Controller,link,compile

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.