[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 ...
随机推荐
- HDU 5734 Acperience
Acperience Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- 编程式事务、XML配置事务、注解实现事务
Spring2.0框架的事务处理有两大类: 1 编码式事务 , 这个不说. 2 声明式事务 , 就说这个. 声明式事务又有三种实现方法: 1 (第一种) 最早的方法,用TransactionProxy ...
- Easy Climb
题意: 有n块石头,给定他们的高度,现保持第一和最后一块高度不变,其他可增加和减少高度,求通过变换使所有相邻石头的高度差的绝对值不大于d,所变化高度总和的最小值. 分析: 状态还可以想出来,dp[i] ...
- POJ 2096-Collecting Bugs（概率dp入门）
题意: 有n种bug和s种系统bug,每天发现一种bug(可能已经发现过了)所有种bug被发现的概率相同,求所有bug被发现的期望天数. 分析: dp[i][j]发现i种bug,j种系统bug期望天数 ...
- bzoj 2843 极地旅行社（LCT）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2843 [题意] 给定一个森林,要求提供连边,修改点值,查询路径和的操作. [思路] L ...
- hadoop HDFS 写入吞吐量
最近一个项目 在大把大把的使用hadoop-HDFS,关于HDFS 的优势网上都快说烂了,这里不再说了,免得被.. 呵呵 废话少说,开整 1.场景描述: 服务器A 监听 服务器B分发任务socket. ...
- 现代程序设计——homework-07
1.写在前面 不得不很惭愧地说,在看这些博客之前,我对C++的了解仅限于上过一门特别水的关于C++的公选课.一门只有五节课的专业选修课,写过一点点符合C++语法语法规则的类C程序,偶尔在论坛.博客中看 ...
- EasyUI样式在IE下无法显示原因总结
1.js css顺序错误 <script type="text/javascript" charset="utf-8" src="js/jque ...
- hadoop streaming 编程
概况 Hadoop Streaming 是一个工具, 代替编写Java的实现类,而利用可执行程序来完成map-reduce过程.一个最简单的程序 $HADOOP_HOME/bin/hadoop jar ...
- vim MiniBufExplorer 插件
MiniBufExplorer安装好久了,但一直没怎么使用过. 今天查了下资料,作为一个备份. 当你只编辑一个buffer的时候MiniBufExplorer派不上用场, 当 你打开第二个buffer ...