Home > Developer > Web Develop
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:
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!
"Reprint" AngularJs Directive Directive of Controller,link,compile
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
