[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 ...
随机推荐
- Nginx源码安装及调优配置
导读 由于Nginx本身的一些优点,轻量,开源,易用,越来越多的公司使用nginx作为自己公司的web应用服务器,本文详细介绍nginx源码安装的同时并对nginx进行优化配置. Nginx编译前的优 ...
- [Everyday Mathematics]20150128
求极限 $$\bex \lim_{x\to 0}\sex{\frac{e^x+e^{2x}+\cdots+e^{nx}}{n}}^\frac{1}{x}. \eex$$
- String.valueOf()
1. 由 基本数据型态转换成 String String 类别中已经提供了将基本数据型态转换成 String 的 static 方法 也就是 String.valueOf() 这个参数多载的方法 有下 ...
- linux 常用命令基础
linux常用的命令 shell 是命令语句,命令解释程序以及程序设计语言的统称,它不仅仅拥有自己内建的shell命令集,同时也能被系统中其他应用程序所调用 shell 的一个重要特性是它本身就是一个 ...
- C++ 之高效使用STL ( STL 算法分类)
http://blog.csdn.net/zhoukuo1981/article/details/3452118
- 中文模糊搜索 - chunyu
什么是模糊搜索?为什么要使用模糊搜索?相信大家都知道这些,我就不讲了.今天只讲怎么使用模糊搜索. 一 LIKE.大名鼎鼎的like字句,使用方便,兼容性好,易维护,但效率奇低.大家都会用,不多介绍. ...
- Java多线程编程之同步器
同步器 为每种特定的同步问题提供了解决方案 Semaphore Semaphore[信号标:旗语],通过计数器控制对共享资源的访问. 测试类: package concurrent; import c ...
- 【转】 Nginx系列（一）--nginx是什么？
原博文出于:http://blog.csdn.net/liutengteng130/article/details/46700939 感谢! 一.介绍 Nginx是一个高性能的HTTP和反向代理服务 ...
- 软件工程个人项目--Word frequency program
(一)工程设计时间预计 1.代码编写:2小时 (1)文件夹的遍历以及筛选: (2)文件夹的读取,以及对读取字符的操作: (3)所得结果排序,以及文件输出. 2.程序调试:1小时 (1)编写数据. (2 ...
- WScript中调用js方法
http://zhidao.baidu.com/question/484374074.html ———————————————————————————————————————————————— Sub ...