[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 ...
随机推荐
- <转>ERP的测试用例模板
1页面部分(1) 页面清单是否完整(是否已经将所需要的页面全部都列出来了)(2) 页面是否显示(在不同分辨率下页面是否存在,在不同浏览器版本中页面是是否显示)(3) 页面在窗口中的显示是否正确.美观( ...
- NIS Edit&Nsis打包程序发布(安装和卸载)
转自:http://blog.csdn.net/signjing/article/details/7855855 注意:首选得明确自己需要打包的程序,以及程序需要的dll文件,资源文件等. 1.下载N ...
- 【SummaryPlan】Summary of Feb & Plan of March——How to 'just do it'?
Why I choose to be a graduate student from an undergraduate student? It’s time to applying for inter ...
- (四面体)CCPC网络赛 HDU5839 Special Tetrahedron
CCPC网络赛 HDU5839 Special Tetrahedron 题意:n个点,选四个出来组成四面体,要符合四面体至少四条边相等,若四条边相等则剩下两条边不相邻,求个数 思路:枚举四面体上一条线 ...
- 解决问题的步骤（第一篇）-- clwu
现象: 之前打开IE 还是正常的,但前几天开始打开就不正常了,报错如下. 处理(别人的)问题的步骤: 百度一下 0xc0000018,没有什么有用信息. 看一下程序(IE)启动时做了些什么. 怎么看 ...
- Using FastCGI to Host PHP Applications on IIS 7 -IIS7 怎么配置 PHP5
This article describes how to configure the FastCGI module and PHP to host PHP applications on IIS 7 ...
- Oracle的回收站和闪回查询机制(一)
实际工作中,我们经常会遇到一些情况,误删除某些表或某些表的某些记录,这时候就需要我们将这些记录重新插入进去.如何才能解决这个问题呢? Oracle的Flashback query(闪回查询)为我们解决 ...
- HDU 4884 TIANKENG’s rice shop （模拟）
TIANKENG's rice shop 题目链接: http://acm.hust.edu.cn/vjudge/contest/123316#problem/J Description TIANKE ...
- HDU 5510 Bazinga (2015沈阳现场赛，子串判断)
Bazinga Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Sub ...
- Laravel Configuration
Introduction All of the configuration files for the Laravel framework are stored in the app/config d ...