Angularjs自定义指令Directive详解

 更新时间:2017年05月27日 09:37:38   作者:Insus.NET  
Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面通过实例代码给大家介绍Angularjs自定义指令Directive相关知识,感兴趣的朋友一起学习吧

今天学习angularjs自定义指令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 bundle了。

定义一个App:

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

定义一个控制器:

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

演示:

以上所述是小编给大家介绍的Angularjs自定义指令Directive详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • AngularJS入门教程之路由机制ngRoute实例分析

    AngularJS入门教程之路由机制ngRoute实例分析

    这篇文章主要介绍了AngularJS入门教程之路由机制ngRoute,结合实例形式分析了AngularJS路由机制的原理、ngRoute的组成、配置、参数与相关使用技巧,需要的朋友可以参考下
    2016-12-12
  • Angular中ng update命令force参数含义详解

    Angular中ng update命令force参数含义详解

    这篇文章主要为大家介绍了Angular中ng update命令force参数含义详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • Angular利用HTTP POST下载流文件的步骤记录

    Angular利用HTTP POST下载流文件的步骤记录

    这篇文章主要给大家介绍了关于Angular利用HTTP POST下载流文件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-07-07
  • 详解封装基础的angular4的request请求方法

    详解封装基础的angular4的request请求方法

    这篇文章主要介绍了详解封装基础的angular4的request请求方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Angular中使用Api 代理的实现

    Angular中使用Api 代理的实现

    我们对接的过程中总是遇到跨域的问题,本文使用 angualr 来讲解代理api对接的话题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • 详解Angular组件之中间人模式

    详解Angular组件之中间人模式

    设计一个组件时,组件应该是内聚的,应该不依赖外部已经存在的组件,要实现这种松耦合的组件要使用中间人模式。
    2021-05-05
  • 浅谈angular2路由预加载策略

    浅谈angular2路由预加载策略

    这篇文章主要介绍了浅谈angular2路由预加载策略,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • angular.js实现列表orderby排序的方法

    angular.js实现列表orderby排序的方法

    今天小编就为大家分享一篇angular.js实现列表orderby排序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 详解AngularJS中ng-src指令的使用

    详解AngularJS中ng-src指令的使用

    这篇文章给大家详细介绍了AngularJS中ng-src指令的使用,对大家学习AngularJS具有一定参考价值,有需要的朋友们可以参考借鉴。
    2016-09-09
  • angular.js之路由的选择方法

    angular.js之路由的选择方法

    下面小编就为大家带来一篇angular.js之路由的选择方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09

最新评论