Angularjs custom commands direve VE and angularjsdireve ve

Angularjs custom commands direve VE and angularjsdireve ve

Learn about the custom Directive direve ve of angularjs today.
Directive is a great feature. We can implement our own functional methods.

The following example shows whether the account entered by the user in the text box is Admin ".

Put a text box and a button on the webpage:

<Form id = "form1" name = "form1" ng-app = "app" ng-controller = "ctrl" novalidate> <input id = "Text1" type = "text" ng-model = "Account" is-Administrator/> <br/> <input id = "ButtonVerify" type = "button" value = "Verify" ng-click = "Verify (); "/> </form>Source Code

Then you need to reference the angularjs Class Library:

 @Scripts.Render("~/bundles/angular")

The above is ASP. net mvc bundle.

Define an App:

 var app = angular.module('app', []);

 

Define a controller:

 

App. controller ('ctrl ', function ($ scope) {$ scope. account; $ scope. verify = function () {if ($ scope. form1. $ valid) {alert ('OK. ');} else {alert ('failure. ');}};});Source Code

The following code focuses on custom commands:

App. directive ("isAdministrator", function ($ q, $ timeout) {var adminAccount = "Admin"; var CheckIsAdministrator = function (account) {return adminAccount = account? True: false ;}; return {restrict: "A", require: "ngModel", link: function (scope, element, attributes, ngModel) {ngModel. $ asyncValidators. isAdministrator = function (value) {var defer = $ q. defer (); $ timeout (function () {if (CheckIsAdministrator (value) {defer. resolve ();} else {defer. reject () ;}}, 700); return defer. promise ;}}};});Source Code

 

Demo: