一、angularjs自定义指令检验两次输入的密码是否一致
'use strict';
ResetPasswordApp.directive('pwCheck', [function () {
return {
restrict: 'A',
require: "ngModel",
link: function(scope, elem, attrs, ctrl) {
var otherInput = elem.inheritedData("$formController")[attrs.pwCheck];
ctrl.$parsers.push(function(value) {
ctrl.$setValidity("pwCheck",value === otherInput.$viewValue);
return value;
});
otherInput.$parsers.push(function(value) {
ctrl.$setValidity("pwCheck", value === ctrl.$viewValue);
return value;
});
}
};
}]);
<form ng-controller="confimPwFormController" ng-submit="submit()" id="confirmPwForm" name="confirmPwForm">
<div class="form-group">
<input type="password" placeholder="请输入新密码" ng-model="confirm.password" name="password" required=true class="required form-control" />
</div>
<div class="form-group">
<input type="password" placeholder="请再次输入新密码" ng-model="confirm.plainPassword" pw-check="password" name="plainPassword" required class="required form-control" />
</div>
<div class="form-group">
<input type="submit" class="btn btn-info btn-block" value="完成" ng-disabled="confirmPwForm.$invalid"/>
</div>
</form>
分享到:
相关推荐
在本文中,我们将深入探讨如何在AngularJS框架中创建自定义指令来封装ECharts 2的雷达图。ECharts是一款由百度开发的开源JavaScript图表库,它提供了丰富的可视化图表类型,包括雷达图。AngularJS是一个强大的前端...
在这个场景中,我们关注的是如何利用AngularJS的自定义指令来封装ECharts 2的折线图功能。ECharts是一个基于JavaScript的开源可视化库,它提供了丰富的图表类型,包括折线图、柱状图、饼图等,适用于各种数据展示...
在AngularJS中,自定义指令通过`@Directive`装饰器声明,其基本结构包括: ```javascript app.directive('directiveName', function() { return { restrict: 'AECM', // A - attribute, E - element, C - class, ...
总的来说,通过 AngularJS 的自定义指令,我们可以将 ECharts 2 的柱状图封装成一个易于复用和维护的组件,使得在页面中多次调用柱状图变得更加便捷和高效。同时,这也展示了 AngularJS 如何优雅地结合第三方库,...
"angularjs指令 下拉框"这个主题聚焦于如何利用AngularJS创建一个自定义的下拉框(Dropdown)指令。下拉框在Web开发中非常常见,常用于选项选择或者导航菜单。 首先,我们需要理解AngularJS中的指令是如何工作的。...
AngularJS是一个强大的前端JavaScript框架,其核心特性之一就是自定义指令。自定义指令允许开发者扩展HTML,创建新的元素或属性,以实现特定的功能。在本文中,我们将深入探讨AngularJS自定义指令的创建、使用以及...
- **文本和属性绑定**:使用`$interpolate`服务在编译过程中绑定文本和属性,AngularJS会检测匹配到的文本和属性值是否包含内嵌表达式。 - **SVG元素的特例**:由于SVG DOM API的限制,某些属性不能直接使用绑定语法...
在AngularJS中,自定义指令是构建可复用组件的关键特性,它允许开发者创建全新的HTML元素、属性、CSS类甚至注释,从而定制化DOM元素的行为。 自定义指令的定义通常包括以下几个部分: 1. **restrict**:限制指令...
AngularJS 自定义指令 transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用。默认值为false不能使用嵌套,true为可以使用嵌套。在哪个标签上使用ng-transclude就在哪个标签内进行嵌套。 代码示例:...
在本文中,我们将深入探讨如何使用AngularJS框架创建一个自定义指令来实现三级联动选择地理位置的功能。这个功能在很多Web应用中都非常常见,比如在线地图服务、房地产网站或者物流跟踪系统,用户需要根据国家、省份...
创建自定义指令需要使用`angular.module().directive()`方法,其中`directive`函数接收两个参数:指令名称和一个配置对象。配置对象可以包含多个选项,如`restrict`(限制指令的应用方式,如元素、属性、类或注释)...
使用自定义指令时,应该遵循AngularJS的最佳实践,比如最小化对DOM的直接操作,避免过度创建指令,以及保持指令功能的单一性。这些原则有助于维护代码的清晰性和可扩展性。 总结来说,AngularJS的自定义指令是一个...
有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么...自定义指令在 Angularjs 项目中主要有两大用途: 1.封装指定组件的DOM操作 Angularjs 期望的开发方式是将DOM
本文实例讲述了AngularJS自定义指令之复制指令实现方法。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-...
在本文中,我们将深入探讨如何使用AngularJS来创建一个自定义的Select组件,该组件具有选项自定义和搜索查找功能。AngularJS是一个流行的JavaScript框架,它提供了强大的数据绑定和依赖注入机制,使得构建动态Web...
本文实例讲述了AngularJS自定义指令实现面包屑功能。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang=zh-CN ng-app=myApp> <head> <meta charset=utf-8> <meta ...
在AngularJS中,自定义指令是扩展HTML能力的关键特性,...总之,自定义指令是AngularJS的核心部分,通过它们我们可以构建可复用、可维护的组件。理解并掌握这些细节和技巧,能帮助开发者创建出高效且灵活的应用程序。