[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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。