[AngularJS] Using ngModel in Custom Directives
You can use ngModel in your own directives, but there are a few things you'll need to do to get it working properly.
ngModel itself is an directive. If you want to use it inside your own directive, you should use require keyword.
/**
* Created by Answer1215 on 12/18/2014.
*/
angular.module('app', [])
.directive('bank', function() {
return{
restrict: 'E',
template: '<div>Click me to add $10 into your account</div>',
require: 'ngModel',
//The ^ prefix means that this directive searches for the controller on its parents (without the ^ prefix, the directive would look for the controller on just its own element)
link: function(scope, element, attrs, ngModelCtrl) {
//so it looks for the controller on ngModel --> ngModelController
//it has method setViewValue
//has prop: viewValue
element.on('click', function() {
ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue + 10);
scope.$apply();
})
}
}
})
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-init="money=10"></div>
<bank ng-model="money"></bank>
{{money | currency}}
<script src="bower_components/angular/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
[AngularJS] Using ngModel in Custom Directives的更多相关文章
- AngularJs 中ngModel绑定HTML5 date数据同步问题
以下代码例子中,直接将date类型的input标签与ng-model对应的变量绑定,会出现内存数据和页面数据不一致的问题.虽然AngularJS是双向数据绑定,但是如果用下面的方法,在页面更新date ...
- AngularJS模型 ng-model 指令
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定.例 ...
- AngularJS 关于ng-model和ng-bind还有{{}}
What's the difference between ng-model and ng-bind ng-bind has one-way data binding ($scope --> v ...
- AngularJS 中ng-model通过$watch动态取值
这个例子的意思是,当xxxx的长度不超过6时,xxxx和yyyy两个input的model是无关的,但当xxxx超过6,则yyyy会跟随其值而变化. 另一种做法是在input的ng-model后面添加 ...
- [译]在AngularJS中何时应该使用Directives，Controllers或者Service
原文: http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/ Services Servic ...
- [AngularJS] Using Services in Angular Directives
Directives have dependencies too, and you can use dependency injection to provide services for your ...
- angularJs中ngModel的坑
angular中指令被用的最多的除了ng-repeat之外就非他莫属了吧,由于各种业务的需求,我们经常需要去写一些继承ngModel的指令,来满足各种奇葩需求,最多的莫过于表单的验证啦,另外你在封装一 ...
- A Step-by-Step Guide to Your First AngularJS App
What is AngularJS? AngularJS is a JavaScript MVC framework developed by Google that lets you build w ...
- AngularJS基础总结
w3shools angularjs教程 wiki <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...
随机推荐
- C# 一次查询多表，填充DataSet并指定表名
lhrhi 原文 NET 一次查询多表,填充DataSet并指定表名(DataSet指定DataTable名称的技巧) 现实中的场景,有时可能需要一次查询数据库中表张.在使用SqlDataAdapte ...
- Dev gridControl 添加表标题
1.OptionsView ->ShowViewCaption = True 2.ViewCaption = "标题"
- Android之布局属性
1) 布局的相关属性 ① android:layout_weight="1.0",layout_weight 用于给一个线性布局中的诸多视图重要度赋值.所有的视图都有一个layou ...
- Number Sequence(KMP,判断子串 模板)
题意: 给两数组,求一个是否是另一个的子数组,若是返回匹配的首位置 分析: KMP 入门 //扫描字符串A,并更新可以匹配到B的什么位置. #include <map> #include ...
- codeforces 696B Puzzles 树形概率计算
题意:给一棵有根树,从根节点深搜,每次随机走,问每个点的dfs序的期望是多少 分析:对于每一个点,它的所有祖先节点dfs序肯定在它之前,它所在的子树的节点一定在它后面, 剩下的是既不是子树又不是祖先的 ...
- Java连接Sql Server2008
参考:http://weistar.iteye.com/blog/1744871 准备工作: 1.下载JDBC驱动包:http://www.microsoft.com/zh-cn/download/d ...
- c++与java的优缺点
大多数程序员都认为C/C++会比Java语言快,甚至于觉得从Java语言诞生以来,"执行速度缓慢"的帽子就应当被扣在头顶,这种观点的出现是由于Java刚出现的时候JIT编译技术 ...
- 【C++对象模型】构造函数语意学之二 拷贝构造函数
关于默认拷贝构造函数,有一点和默认构造函数类似,就是编译器只有在[需要的时候]才去合成默认的拷贝构造函数. 在什么时候才是[需要的时候]呢? 也就是类不展现[bitwise copy semantic ...
- 【九度OJ】题目1201-二叉排序树
题目 建树过程是递归,"递归的思路不是很复杂",经过题目1078的训练,直接开始编码.提交及修改的过程告诉自己,这是一个错觉,对递归的理解还应该再进一步. 自己的实现 #inclu ...
- [原创]一种Unity2D多分辨率屏幕适配方案
此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有使用第三方2D插件,如Uni2D,2D toolkit等开发的游戏,NGUI插件不受这个 ...