Angularjs의 사용자 정의 지시어에 대한 자세한 소개 지시어-JS 튜토리얼-php.cn

Angularjs의 사용자 정의 지시어에 대한 자세한 소개 지시어

黄舟

풀어 주다： 2017-05-27 10:40:34

원래의

1442명이 탐색했습니다.

Directive는 훌륭한 기능입니다. 우리는 우리 자신의 함수형 메서드를 구현할 수 있습니다. 다음은 Angularjs custom directive Directive에 대한 지식을 예제 코드를 통해 소개한 것입니다. 관심 있는 친구들은 함께 배울 수 있습니다.

오늘은angularjs custom directive Directive를 배워보세요.

지시문은 훌륭한 기능입니다. 우리는 우리 자신의 함수형 메서드를 구현할 수 있습니다.

다음 예는 사용자가 텍스트 상자에 입력한 계정이 관리자 계정 "Admin"인지 여부를 보여줍니다.

페이지에 텍스트 상자와 버튼을 넣으세요:

<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>

로그인 후 복사

그런 다음 인용해야 합니다. angularjs의 클래스 라이브러리:

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

로그인 후 복사

위 내용은 ASP.NET MVC에서 번들로 제공됩니다.

앱 정의:

 var app = angular.module(&#39;app&#39;, []);

로그인 후 복사

컨트롤러 정의:

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

로그인 후 복사

다음은 키 코드, 맞춤 지침입니다:

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

로그인 후 복사

데모: