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.

  1. /**
  2.  * Created by Answer1215 on 12/18/2014.
  3.  */
  4. angular.module('app', [])
  5.     .directive('bank', function() {
  6.         return{
  7.             restrict: 'E',
  8.             template: '<div>Click me to add $10 into your account</div>',
  9.             require: 'ngModel',
  10.             //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)
  11.             link: function(scope, element, attrs, ngModelCtrl) {
  12.                 //so it looks for the controller on ngModel --> ngModelController
  13.                 //it has method setViewValue
  14.                 //has prop: viewValue
  15.                 element.on('click', function() {
  16.                     ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue + 10);
  17.                     scope.$apply();
  18.                 })
  19.             }
  20.         }
  21.     })
  1. <!DOCTYPE html>
  2. <html ng-app="app">
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <div ng-init="money=10"></div>
  9. <bank ng-model="money"></bank>
  10. {{money | currency}}
  11. <script src="bower_components/angular/angular.min.js"></script>
  12. <script src="app.js"></script>
  13. </body>
  14. </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. mybatis返回HashMap结果类型与映射

    <!-- 返回HashMap结果 类型--> <!-- 如果想返回JavaBean,只需将resultType设置为JavaBean的别名或全限定名 --> <!-- T ...

  2. webdriver（python）学习笔记一

    最近有python开发的项目,也正打算要学习自动化与python语言.因此想通过学习python版本的webdriver来一同学习. 学习过程中参考资料有乙醇的博客:https://github.co ...

  3. Allegro从.brd文件中导出器件封装

    打开.brd文件,File→Export→Libraries,除了No libraries dependencies之外,所有选项都勾选上,设定好存放路径之后,Export. 注意事项: 1. 一般的 ...

  4. IOS-day03_OC中的get和set

    OC中的get和set实质和C#/java中的一样 只是表现形式不同而已 如下: @interface Car : NSObject { int wheels; } -(void) run; -(vo ...

  5. C++实现离散余弦变换（参数为Eigen矩阵）

    C++实现离散余弦变换(参数为Eigen矩阵) 问题描述 昨天写了一个参数为二维指针为参数的离散余弦变换,虽然改进了参数为二维数组时,当数组大小不确定时声明函数时带来的困难,但使用指针作为参数也存在一 ...

  6. php 解决微信昵称emoji表情插入MySQL报错

    在PHP接受到微信用户昵称入库的时候报错 原因:utf-8 最大3个字节,而emoji占4个字节 解决办法: 1.修改mysql 数据库的字符集,改为utf8mb4,但是前提是MySQL的版本需要5. ...

  7. sqlServer 取每组的前几条数据

    首先的建表语句: ) DROP TABLE [test] CREATE TABLE [test] ( [id] [, ) NOT NULL , [name] [nvarchar] () NULL , ...

  8. 使用PPA在ubuntu上安装emacs

    使用PPA(Personal Package Archive)在ubuntu上安装emacs 1添加 PPA 到 apt repository 中:   $ sudo add-apt-reposito ...

  9. vs2012不能打开项目解决办法

    只要卸载这两个不定就能解决问题.

  10. [C语言 - 10] C语言保留字

    一  数据类型关键字 12 个:    1 . char     2 . short    3 . int     4 . long     5. enum    6. float    7. dou ...