[AngularJS] Using ngModel in Custom Directives

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 65 阅读

文章标签：

#javascript #ViewUI

本文介绍如何在自定义AngularJS指令中正确使用内置的ngModel指令。通过一个银行账户金额增加的例子，演示了如何利用require关键字来获取ngModel控制器，并在点击事件中更新其值。

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>