码迷,mamicode.com
首页 > Web开发 > 详细

[AngularJS] Using ngModel in Custom Directives

时间:2014-12-19 07:02:29      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:style   blog   ar   io   color   sp   for   strong   on   

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

标签:style   blog   ar   io   color   sp   for   strong   on   

原文地址:http://www.cnblogs.com/Answer1215/p/4173059.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!