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的更多相关文章

  1. AngularJs 中ngModel绑定HTML5 date数据同步问题

    以下代码例子中,直接将date类型的input标签与ng-model对应的变量绑定,会出现内存数据和页面数据不一致的问题.虽然AngularJS是双向数据绑定,但是如果用下面的方法,在页面更新date ...

  2. AngularJS模型 ng-model 指令

    ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定.例 ...

  3. AngularJS 关于ng-model和ng-bind还有{{}}

    What's the difference between ng-model and ng-bind ng-bind has one-way data binding ($scope --> v ...

  4. AngularJS 中ng-model通过$watch动态取值

    这个例子的意思是,当xxxx的长度不超过6时,xxxx和yyyy两个input的model是无关的,但当xxxx超过6,则yyyy会跟随其值而变化. 另一种做法是在input的ng-model后面添加 ...

  5. [译]在AngularJS中何时应该使用Directives，Controllers或者Service

    原文: http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/ Services Servic ...

  6. [AngularJS] Using Services in Angular Directives

    Directives have dependencies too, and you can use dependency injection to provide services for your ...

  7. angularJs中ngModel的坑

    angular中指令被用的最多的除了ng-repeat之外就非他莫属了吧,由于各种业务的需求,我们经常需要去写一些继承ngModel的指令,来满足各种奇葩需求,最多的莫过于表单的验证啦,另外你在封装一 ...

  8. 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 ...

  9. AngularJS基础总结

    w3shools    angularjs教程  wiki   <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...

随机推荐

  1. 本博客迁移到Github，之后停止更新

    本博客之后停止更新或者更新不是很及时,关注博客请移步   http://waylife.github.io 或者 http://blog.13kbook.com   谢谢支持. Update Time ...

  2. IOS release 版本的时候 去掉输出log NSLog

    在.pch文件中添加下面一段 #ifndef __OPTIMIZE__ #define NSLog(...) NSLog(__VA_ARGS__) #else #define NSLog(...) { ...

  3. ASPNET中实现在线用户检测（使用后台守护线程）

    启动后台线程可以用下面的语句:CheckOnline online=new CheckOnline(); 用户可以将它放到GLOBAL.ASAX中,我是没有了,只放到了一个ASPX文件中做简单的测试. ...

  4. Tkinter教程之Entry篇

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1811302 #Tkinter教程之Entry篇#Entry用来输入单行文本'''1.第一个En ...

  5. 从Search Sort到Join

    发表于<程序员>2015年4月B的一篇文章,在博客归档下.根据杂志社要求,在自己博客发表该文章亦须注明:本文为CSDN编译整理,未经允许不得转载,如需转载请联系market#csdn.ne ...

  6. VB调用自持字体

    VB调用自制字体我这里有一个C#的例子,请问如何在VB中实现啊. 我们写exe程序时,默认字体是宋体,比较难看,指定了其他字体,但是其他用户上没有你指定的这个字体的话,也会变成默认的宋体.解决的办法有 ...

  7. Spark SQL概念学习系列之Spark生态之Spark SQL（七）

    具体,见

  8. homework-1

    看到这个题目开始我只能想到动态规划四个字,但具体采用什么方法,如何写成代码却还未成型.动态规划的典型特点就是利用之前的结果.于是我很快想到了之前一个比较典型的小程序,即求最长的连续字符串.这两个题目有 ...

  9. document.documentElement.clientHeight||document.documentElement.scrollHeight

    在我看<JavaScript高级程序设计>(第三版)的时候,在clientHeight和scrollHeight那部分把我弄糊涂了. 原书是这样写的:( //宽度同理,就不仔细描述了.) ...

  10. ecstore b2b2c 商城页面伪静态代码 及相关注意事项

    一下代码需要添加到 nginx.conf配置文件的server块,阿里云虚拟机一般在conf文件夹下建立vhost文件夹,把server块放进去,然后 在nginx.conf使用include 包含进 ...