需求背景:

在form中使用编写的某component directive时。想通过form's name来对form中控件进行操作,
如使用$invalid等来ng-disabled btn。

解决方式:

通过使用form.$addControl将控件中的control注冊到form中,既可使用form's name.xxx.$invalid方式来操作。

详细方法:

    tw.directive('nameForForm', function() {
return {
restrict: 'A',
require: "?ngModel",
link: function($scope, elem, attrs, ngModelCtrl) { var formController = elem.controller('form') || {
$addControl: angular.noop
}; ngModelCtrl.$name = attrs.workflowNameForForm;
formController.$addControl(ngModelCtrl); $scope.$on('$destroy', function() {
formController.$removeControl(ngModelCtrl);
}); return true;
}
};
});

使用方式:

component:

<div class="btn-group select select-block mbn">
...
<input type="text" ng-show="false" ng-model="selectedValue" ng-required="selectRequired"
name-for-form="{{nameForForm}}" />
</div>

注意:在component中引入nameForForm,且scope中加入nameForForm: '@'


页面使用component:

<tw-select-list name-for-form="city" ... />

參考:http://www.ngnice.com/posts/81c1eb92bfbde0

AngularJS form $addControl 注冊控件control的更多相关文章

  1. Leaflet:控件Control相关

    Leaflet官方文档中只给出了4种控件:Zoom.Attribution.Layers.Scale:它们都是继承自Control类,具体可以参考Control. Control Zoom.Scale ...

  2. 线程间操作无效: 从不是创建控件“”的线程访问它~~~的解决方法~ 线程间操作无效: 从不是创建控件“Control Name'”的线程访问它问题的解决方案及原理分析

    看两个例子,一个是在一个进程里设置另外一个进程中控件的属性.另外一个是在一个进程里获取另外一个进程中控件的属性. 第一个例子 最近,在做一个使用线程控制下载文件的小程序(使用进度条控件显示下载进度)时 ...

  3. [转]通过AngularJS directive对bootstrap日期控件的的简单包装

    本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...

  4. [整理]通过AngularJS directive对bootstrap日期控件的的简单包装

    最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形 ...

  5. 【经验】Angularjs 中使用 layDate 日期控件

    layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/ ...

  6. C# WinForm窗体 控件Control 的 Invalidate、Update、Refresh的区别

    Control.Refresh - does an Control.Invalidate followed by Control.Update.Refresh: 强制控件使其工作区无效并立即重绘自己和 ...

  7. AngularJs的UI组件ui-Bootstrap---tabs控件

    tabs控件使用uib-tabset指令和uib-tab指令,效果是这样的: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo ...

  8. .net控件Control透明

    public partial class tspControl : UserControl { public tspControl() { InitializeComponent(); SetStyl ...

  9. AngularJS页面【uib-dropdown】控件在模态窗口(弹出窗)中无法使用问题

    如果你的下拉框中有属性 dropdown-append-to-body 将它去掉,即可正常使用该插件. <div class="btn-group dropdown" uib ...

随机推荐

  1. 上机题目(0基础)- Java网络操作-Socket实现client和server端通信二(Java)

    上一节实现了client像server端发送请求.本节将实现server端向client回传信息.实现原理非常easy,在原来的基础上.在server端实现输出流,在client实现输入流就可以,详细 ...

  2. python获取输入参数

    python获取输入参数 学习了:https://www.cnblogs.com/angelatian/p/5832448.html import sys模块: len(sys.argv)参数个数 s ...

  3. 转:android实时语音问题分析

    转:http://ticktick.blog.51cto.com/823160/1746136 PigeonCall:一款Android VoIP网络电话App架构分析 2016-02-29 20:1 ...

  4. [Unit Testing] Mock a Node module's dependencies using Proxyquire

    Sometimes when writing a unit test, you know that the module you're testing imports a module that yo ...

  5. 在项目中引用android.support.v7

    在Android开发中,新建的项目可能因为缺少对sopport工程的引用而报错,可以这样解决. 1.项目右键 --> import --> Android --> Existing ...

  6. JAVA Eclipse中如何简易的实现消息机制

    大部分情况下,我们需要实现的消息机制无非是某个类得到了数据,需要传递到某个主界面上去显示,可以把这个消息在类中做成全局变量,主界面的类用一个线程定时扫描,如果这个数据不是空,则说明被类刷新了,那么更新 ...

  7. C++ 智能指针详解(转)

    C++ 智能指针详解   一.简介 由于 C++ 语言没有自动内存回收机制,程序员每次 new 出来的内存都要手动 delete.程序员忘记 delete,流程太复杂,最终导致没有 delete,异常 ...

  8. 字典转模型的过程中,空值和id特殊字符的处理

    在IOS 中id是特殊字符,可是非常多时候从网络中下载的数据是以id保存的 假设在定义属性的时候 @property(nonatomic, copy) NSString *id; 就不会出现错误 当键 ...

  9. nightwatch-js -- test group

    Test group 可以将你的测试脚本划分到组中,并根据需要运行它们.要将测试组合在一起,只需将它们放在相同的子文件夹中,文件夹的名字即是组的名字.例如:lib/├── selenium-serve ...

  10. Oracle SOA套件12c

    产品概览 随着基于云的应用越来越多的被企业所採用,以及移动技术与企业应用的集成的需求的增多,企业级应用集成的复杂度也前所未有的提升. Oracle SOA套件12c,业内最完整的统一应用集成解决方式的 ...