[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 ...
随机推荐
- 【c++内存分布系列】单继承
父类包括成员函数.静态函数.静态方法,子类包括成员函数.静态函数.静态方法的情况与一个类时完全一致,这里就不做分析了.子类单独包含虚函数时继承无关,也不做分析了. 一.父类子类都为空 #include ...
- JS 代码编一个倒时器
有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的 ...
- POJ 1573 Robot Motion
Robot Motion Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 12978 Accepted: 6290 Des ...
- Tomcat中的线程池StandardThreadExecutor
之所以今天讨论它,因为在motan的的NettyServer中利用它这个线程池可以作为业务线程池,它定制了一个自己的线程池.当然还是基于jdk中的ThreadExecutor中的构造方法和execut ...
- Polymer——Template
Polymer Template 一.Ta的简介 template是polymer element中一个重要的组成部分,主要有两种使用目的,一是构建Shadow Dom,二是用于数据绑定和视图渲染. ...
- Windows10输入法的切换
Alt+Shift 中⇒あ,あ⇒中 Shift 中⇒英,英⇒中 Alt+Caps Lock あ⇒カ,A⇒あ⇒カ Ctrl+Caps Loc ...
- 在NodeJS中配置aws ec2
获取access key和secret access key 自己账户下有security credentials的选项 然后点击Acce ...
- SRM 502 DIV1 500pt(DP)
题目简述 给定比赛时间T和n个题目,你可以在任意时间提交题目,每个题目有一个初始分数maxPoints[i],每个单位时间题目的分数将会减少pointsPerMinute[i],即如果在时间t解决了第 ...
- homework-1
看到这个题目开始我只能想到动态规划四个字,但具体采用什么方法,如何写成代码却还未成型.动态规划的典型特点就是利用之前的结果.于是我很快想到了之前一个比较典型的小程序,即求最长的连续字符串.这两个题目有 ...
- Java邮件服务学习之二：SMTP和POP3
一.SMTP SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则.SMTP协议属于TCP/IP协议簇,它帮助每台计算 ...