A detailed introduction to Angularjs’s custom directive Directive

Directive is a great feature. We can implement our own functional methods. The following is an introduction to the knowledge related to AngularjsCustom instruction Directive through example code. Friends who are interested can learn together

Today, learn angularjs custom instruction Directive.

Directive is a great feature. We can implement our own functional methods.

The following example is to demonstrate whether the account entered by the user in the text box is the administrator's account "Admin".

Put a text box and a button on the web page:

##

cite angularjsClass library:

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

ASP.NET MVC bundled.

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

Controller:

app.controller('ctrl', function ($scope) {
   $scope.Account;
   $scope.Verify = function () {
    if ($scope.form1.$valid) {
     alert('OK.');
    }
    else {
     alert('failure.');
    }
   };
  });

##

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;
     }
    }
   };
  });

The above is the detailed content of A detailed introduction to Angularjs’s custom directive Directive. For more information, please follow other related articles on the PHP Chinese website!