[AngularJS] Using ngModel in Custom Directives
2024-10-14 11:08:37
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>
最新文章
- UI复习
- CSS3-animation,表格表单的格式化
- Android EditText 密码框默认是小圆点 怎么改成其它的(*)?
- 在autoit中如何将combobox设置为只允许选择不允许输入呢
- 实现毛玻璃模糊效果/DRNRealTimeBlur
- Yii 框架里数据库操作详解
- UIVIew之霓虹灯实现
- amcharts报表制作
- mime大全收集
- GoLang获取struct的tag
- 多线程异步编程示例和实践-Thread和ThreadPool
- C# xml 读xml、写xml、Xpath、Xml to Linq、xml添加节点 xml修改节点
- su与su -的区别
- linux crontab定时器
- mysql left join 查询
- HDU1072 Nightmare(BFS) 2016-07-24 14:02 40人阅读 评论(0) 收藏
- __iter__的有无
- Sqlite数据库初步的了解
- c/c++指针详解(一)
- 剑指Offer——第一个只出现一次的字符位置