[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 ...
随机推荐
- Unable to execute dex: method ID not in [0, 0xffff]: 65536
http://ingramchen.io/blog/2014/09/prevention-of-android-dex-64k-method-size-limit.html
- 自定义TreeList单元格 z
DevExpress Treelist自定义单元格,加注释和行序号.以上一节的列表为例,实现以下效果:预算大于110万的单元格突出显示,加上行序号以及注释,如下图: 添加行序号要用到CustomDra ...
- Delphi word 颜色
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, ...
- linux命令——磁盘管理cd
Linux cd 命令可以说是Linux中最基本的命令语句,其他的命令语句要进行操作,都是建立在使用 cd 命令上的. cd指令可让用户在不同的目录间切换,但该用户必须拥有足够的权限进入目的目录. 1 ...
- Selenium2Library系列 keywords 之 _SelectElementKeywords 之 _get_select_list_options_selected(self, locator)
def _get_select_list_options_selected(self, locator): select = self._get_select_list(locator) # TODO ...
- Motan学习开篇
你已经走到这里了,后面只要耐心的走下去就行了. --佚名 入职新公司以后,公司使用dubbo框架,简单的照葫芦画瓢之后,也算是入手了,但是其中内部的实现的机制一概不懂.我单纯的有种好奇心,觉得每个 ...
- python学习之self，cls，staticmethod，classmethod
一.总体说明 python类里会出现这三个单词,self和cls都可以用别的单词代替,类的方法有三种, 一是通过def定义的 普通的一般的,需要至少传递一个参数,一般用self,这样的方法必须通过一个 ...
- C语言相关图书推荐
C Primer Plus(第5版 中文版) 作 者 [美] 普拉塔(Prata S.) 著:云巅工作室 编 出 版 社 人民邮电出版社 出版时间 2005-02-01 版 次 1 ...
- oc_转_构造对象的方法，以及类的继承
一.构造方法 (一)构造方法的调用 完整的创建一个可用的对象:Person *p=[Person new]; New方法的内部会分别调用两个方法来完成2件事情: 1) 使用alloc方法来分配存储空间 ...
- sonar 代码质量管理平台
1) 下载 从sonar官网http://www.sonarsource.org/下载 (版本当然是最新的了) 在官网上是不分系统的,一个zip包,下下来之后,包里包含 windows .l ...