zoukankan      html  css  js  c++  java
  • [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>
  • 相关阅读:
    Final Zadanie 题解
    CF1096E The Top Scorer 题解
    [SDOI2008]Sue的小球 题解
    柱爷与远古法阵 题解
    [ZOJ3329] One Person Game 题解
    扑克牌 题解
    CF494C Helping People 题解
    CF1025D Recovering BST 题解
    linux基础学习-Raid 0 1 5 10的原理、特点、性能区别
    linux基础学习-CentOS7.5用户管理
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4173059.html
Copyright © 2011-2022 走看看