angularjs - ngModel 用于隔离指令定义-6ren

angularjs - ngModel 用于隔离指令定义

转载作者：行者123 更新时间：2023-12-04 21:41:58

我的名为 datePicker 的指令位于输入元素上，它从模型中获取公历日期并将其转换为最终用户的波斯日期。
从 datePicker 更改日期(这里是 jalali(波斯日期选择器))，转换为 gregorian 并更新模型是必要的。

我不确定我使用的绑定(bind)类型。

$watch 功能对我不起作用，它在第一次加载页面时起作用
时间。

ngModel 和 dateDirVal 属性在隔离中发生了什么
范围？

gregorianToJalali 函数中 ngModelCtrl.$viewValue 的值
等于 NaN。为什么？

我的 HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/jalali/theme.css" rel="stylesheet" />
    <script src="Scripts/jalali/jalali.js"></script>
    <script src="Scripts/jalali/calendar.js"></script>
    <script src="Scripts/jalali/calendar-setup.js"></script>
    <script src="Scripts/jalali/calendar-fa.js"></script>

    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/directive.js"></script>

</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <input ng-model="dateValue1" date id="id1" />
    </div>
</body>
</html>

和我的指令:

var app = angular.module('myApp', []);

app.controller('myController', function ($scope) {
    var date = new Date('2014', '06', '03');
    var newdate = new Date(date);

    newdate.setDate(newdate.getDate() + 1);
    $scope.dateValue1 = new Date(newdate);
})
.directive('date', function ($compile) {
    return {
        restrict: 'A',
        require: ['date', '^ngModel'],
        scope: {
            dateDirVal: "=ngModel"
        },
        controller: function ($scope) {

        },
        compile: function (element, attr, linker) {
            return {

                post: function postLink($scope, element, attrs, ctrls) {
                    var myCtrl = ctrls[0], ngModelCtrl = ctrls[1];

                    var inputId = element.attr('id').toString();
                    gregorianToJalali();
                    function gregorianToJalali() {
                        var val = ngModelCtrl.$viewValue;
                        if ($scope.dateDirVal) {
                            var inputValue = $scope.dateDirVal;
                            var gDate = new Date(inputValue);
                            var gY = gDate.getFullYear();
                            var gM = gDate.getMonth();
                            var gD = gDate.getDate();
                            var value = JalaliDate.gregorianToJalali(gY, gM, gD);
                            var jalali = value[0].toString() + "/" + value[1].toString() + "/" + value[2].toString();
                            $scope.dateDirVal = jalali;
                        }
                    }

                    Calendar.setup({
                        inputField: inputId,
                        ifFormat: '%Y/%m/%d',
                        dateType: 'jalali'
                    });

                    element.bind("blur", function (e) {
                        var jDate = element.val().split('/');
                        var value = JalaliDate.jalaliToGregorian(jDate[0], jDate[1], jDate[2]);
                        var gDate = new Date(value[0], value[1], value[2]);
                        ngModelCtrl.$setViewValue(gDate);
                        $scope.dateDirVal = value;
                    });

                    $scope.$watch("dateDirVal", function (newValue, OldValue, scope) {
                        if (newValue) {
                            alert(JSON.stringify(newValue));
                        }
                        //ngModelCtrl.$setViewValue(gDate);
                        //$scope.dateDirVal = value;
                    });

                }
            }
        }
    };
});

最佳答案

您可以使用 $parsers 和 $formatters 函数管道来执行此操作。

上的功能$解析器对 DOM 变化使用react，它的返回会改变模型。因此，您可以使用 toGregorianDate 函数来转换波斯日期并保留公历。

上的功能$格式化程序对模型更改使用react，因此，每当模型更改(包括第一次渲染)时，它都会被触发并将其返回渲染到 DOM 中。因此，您可以使用它来调用 toPersianDate 函数并将公历转换为波斯日期以呈现给您的用户。

These functions are listeners, and there are a big caution on compile functions documented on ngModelController DOCs alerting that listenners are supposed to be used on link functions

所以我建议你改变一下你的代码看起来更像这样

.directive('date', function ($compile) {
    return {
        restrict: 'A',
        require: ['date', '^ngModel'],
        scope: {
            dateDirVal: "=ngModel"
        },
        controller: function ($scope) {

        },
        //use link instead of compiler to use DOM listeners
        link: function ($scope, element, attrs, ctrls) {
            var myCtrl = ctrls[0], ngModelCtrl = ctrls[1];

            var inputId = element.attr('id').toString();

            function gregorianToJalali(viewValue) {
                if ($scope.dateDirVal) {
                    var inputValue = $scope.dateDirVal;
                    var gDate = new Date(inputValue);
                    var gY = gDate.getFullYear();
                    var gM = gDate.getMonth();
                    var gD = gDate.getDate();
                    var value = JalaliDate.gregorianToJalali(gY, gM, gD);
                    var jalali = value[0].toString() + "/" + value[1].toString() + "/" + value[2].toString();

                    //The return of a $parsers is what is saved to the model
                    return jalali;
                }
            }

            Calendar.setup({
                inputField: inputId,
                ifFormat: '%Y/%m/%d',
                dateType: 'jalali'
            });

            function jalaliToGregorian(viewValue) {
                var jDate = viewValue.split('/');
                var value = JalaliDate.jalaliToGregorian(jDate[0], jDate[1], jDate[2]);
                var gDate = new Date(value[0], value[1], value[2]);

                //The return of a formmatter is what is rendered on the DOM
                return gDate;
            });

            //with that, jalaliToGregorian will be called every time a user fill the input
            ngModelCtrl.$parsers.unshift(jalaliToGregorian(viewValue))

            //gregorianToJalali will be called every time a model change, converting 
            // gregorian dates and presenting persian date on the view
            ngModelCtrl.$formatters.unshift(gregorianToJalali(viewValue))

        }
    };
});

我尽量不改变你的代码，让你弄清楚发生了什么......所以我没有改变你的 jalaliToGregorian 函数，但你需要注意，$parsers 函数将绑定(bind)到模型它的返回......而你根本不检查输入的日期是否是波斯日期...如果函数返回未定义，则模型将不会更改...如果返回其他内容，则该返回将被绑定(bind)，无论是否为日期(null如果输入日期错误可以绑定(bind))

关于angularjs - ngModel 用于隔离指令定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24013660/

文章推荐： Protractor 测试未在 Firefox 上启动

文章推荐： scala - Play Framework 2.3 和 javascript websocket 客户端库

文章推荐： php - 按模式修剪字符串的结尾(正则表达式？)

Angular - [(ngModel)] vs [ngModel] vs (ngModel)
我目前理解 [(ngModel)]="expression" 是从组件到 View 的双向绑定(bind)，反之亦然。我也明白 [ngModel]="expression" 是单向绑定(bind)(我
angular - 当在 [(ngModel)] 中使用重复数组对象内的属性重复输入字段时，ngModel 不起作用
我实际上是在重复一个 mat 输入字段，然后我用数组中对象的属性名称编写了 [(ngModel)] 作为 [(ngModel)] 的值例如这是我拥有的对象数组: test = [{name: 'Ha
Angular 6 : [(ngModel)] ="variable" vs. ngModel ="{{ variable }}"
我正在观看的 Udemy Angular 6 视频显示使用第一种语法。但是，我使用 WebStorm 作为我的 IDE，当我使用 [(ngModel)]="variable" 语法时，它不会提供任何类
AngularJS - ngrepeat 中的 ngmodel 未更新 ('dotted' ngmodel)
我正在尝试用 Angular 数组绘制 radioBoxes，然后获取选中的 radio 的值，但是模型不会改变它的值吗，有人可以帮我吗？ HTML部分
angularjs - ngModel.$modelValue 和 ngModel.$viewValue 有什么区别
我有以下 ckEditor 指令。底部是我从有关如何在编辑器中设置数据的示例中看到的两种变体: app.directive('ckEditor', [function () { return
angular - [(ngModel)] 和 [ngModel] 将状态绑定(bind)到属性的区别？
这是一个模板示例: 这里他们两个做同样的事情。首选哪一个？为什么？最佳答案 [(ngModel)]="overRideRate" 是 [ngModel]="overRideRate"的缩写形式
javascript - Angular 2+ ngModel 仅使用对象括号表示法在嵌套值上绑定(bind)动态 ngModel 的一种方式
我得到的是一个动态生成的 ngModel 对象，并且某些不在顶层的属性仅在一个方向上绑定(bind)。包括一个应该让事情变得更清晰的 plunkr，但我想做的是生成一个动态表单，并且如果属性嵌套在根
javascript - 在 AngularJS 指令上需要 :ngModel vs. 范围:{ ngModel: '=' }
嗨，哪个更好？有什么区别？有什么优点和缺点？这是两者的对比代码: 范围:{ ngModel:'=' } app = angular.module('app', []); a
javascript - 从 AngularJs 中的 Controller 绑定(bind) ngModel 或从 ngModel 调用函数
我正在尝试根据 angularjs 中的某些属性绑定(bind)未知的数组索引。 //javascript method inside controller functio
javascript - Angular 2 NgFor Regex 消息错误 - [(ngModel)] 有效，但 ngModel 未定义
我试图在 ngFor 循环中输入具有正则表达式要求的输入，但收到“无法读取未定义的属性‘有效’”错误，我将其用作页面加载时弹出的错误消息。这是我目前的代码: (我拥有的键管道是一个自定义管道，因为
angular - 没有 NgModel 的提供者! (Typeahead -> NgModel) 将 ngControl 添加到 bootstrap 4 TypeHead angular 2 时出现异常
我正在尝试将 ngControl 表单验证添加到 Angualr js 2 中的 bootstrap 4 typehead 控件。代码如下。 {{ requ
angular - ngModel 无法在表单标签内工作
[(ngModel)] 在表单标签内不工作当我使用 Multi Select Outside Form 标签时，可以正常选择 All 和取消选择所有功能但是当我把它放入 Form 里面时，它正在工
angularjs - ngModel - 如何在不弄脏的情况下操纵初始模型值？
假设我想要一个指令，它接受用户在输入中键入的内容并将其转换为小写。所以我想出了一个这样的指令(在这个 Plunker http://plnkr.co/edit/jnE3s8MRr1tFCX0WVYe
angularjs - ngModel 用于隔离指令定义
我的名为 datePicker 的指令位于输入元素上，它从模型中获取公历日期并将其转换为最终用户的波斯日期。从 datePicker 更改日期(这里是 jalali(波斯日期选择器))，转换为 gr
angular - 在这个例子中为什么模板变量的值是 "ngModel"
在这个例子中，我看到了解释，但我仍然不确定我为什么在这种情况下将#name 模板变量设置为“ngModel”。如果有 2 或 3 个其他带有模板变量的输入字段，您是否也将它们的值设置为“ngModel
Angular ngModel 格式输出
这是我的 HTML 代码: Start 因此，startDate 存储为数字(长整型)，但我想显示本地日期时间。我真的不知道该怎么做。我使用相同的组件来创建和更新模型。创建工作正常，因为
angularjs - 如何从指令访问子 ngModel？
喜欢在 this question ，我要加.error在表单域的父级 .control-group当scope.$invalid是真的。但是，像 ng-class="{ error: formNa
angularjs - ngModel 值未在指令中更新
我正在尝试为颜色选择器创建指令，但 ngModel 值的值未更新。知道出了什么问题吗？这是我的代码: .directive('colpkr', [function () {
Angular [(ngModel)] 在其他事件触发后更改数据
我不是 Angular 事件方面的专家，但这是我的问题。如果我运行以下代码，我基本上会用错误的信息更新后端，因为 item.their_platform 在 togglePlatform() 触发之前
angular - ngModel 总是将最后一项复制到表中的所有字段
我有这个数组试图在我的模板中显示，不知何故它无法正确显示。如果我这样做 [value]，它将给我正确的值，但 ofc。不绑定(bind)到数组和值。大批: {"pluNo":1,"pluName":

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

angularjs - ngModel 用于隔离指令定义