zoukankan      html  css  js  c++  java
  • 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>
    Source Code


    然后你需要引用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.');
                    }
                };
            });          
    Source Code


    下面是重点代码,自定义指令:


    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

    演示:

     

  • 相关阅读:
    SQL语句面试题目:一般查询和高级子查询
    几种常见的排序算法分析学习
    60秒倒计时
    JS倒计时
    sonarqube linux安装总结,集成jenkins
    spring boot打成可执行jar
    Spring Cloud服务间调用鉴权
    Spring Cloud Hystrix熔断器隔离方案
    Spring boot 集成Swagger
    Spring boot 集成Swagger
  • 原文地址:https://www.cnblogs.com/insus/p/6908815.html
Copyright © 2011-2022 走看看