Question

我需要一个带掩码的输入字段，但我希望模型保持屏蔽值。

电话号码应以以下格式显示并存储在数据库中：## ## ## ## ##。

我在Web App上使用这个库：formatter.js，我试着了解将Angular用于移动应用程序的最佳方式。

这是我到目前为止所做的：

指令：

.directive('curubaTelephone', function () {
    return {
        restrict: 'AC',
        replace: false,
        link: function (scope, element) {
            element.formatter({
                'pattern': '{{99}} {{99}} {{99}} {{99}} {{99}}',
                'persistent': false
            });
        }
    }
})

HTML：

    <label class="item item-input item-stacked-label">
        <span class="input-label">Fixe</span>
        <input type="text" placeholder="fixe" ng-model="fonction.perso_fixe" class="curubaTelephone">
    </label>

我在index.html中添加了脚本：

<script src="lib/formatter/dist/jquery.formatter.min.js"></script>

控制台返回：

TypeError: element.formatter is not a function
    at link (http://localhost:8100/js/directives.js:48:25)
    at invokeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16855:9)
    at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16365:11)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15714:13)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15717:13)
    at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15593:30)
    at $get.boundTranscludeFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15732:16)
    at controllersBoundTransclude (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16392:18)
    at ngRepeatAction (http://localhost:8100/lib/ionic/js/ionic.bundle.js:33138:15)
    at Object.$watchCollectionAction [as fn] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22746:13) <input type="text" placeholder="fixe" ng-model="fonction.perso_fixe" class="curubaTelephone ng-pristine ng-untouched ng-valid">

Answer 1

默认情况下，AngularJS不使用jQuery，只使用名为jqLite的小子集：

如果没有完整的jQuery，你将无法使用任何jQuery插件（如formatter.js）。

幸运的是，如果在 AngularJS本身之前在index.html 中包含jQuery - Angular会自动将其用作angular.element（而不是jqLite）。然后，您将能够访问完整的jQuery功能 - 包括使用其插件的可能性。

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>

更多信息：https://docs.angularjs.org/api/ng/function/angular.element。

AngularJS指令强制数字格式到模型

1 个答案: