当前位置: 首页 > 面试题库 >

ngModel。$ modelValue和ngModel。$ viewValue有什么区别

时修贤
2023-03-14
问题内容

我有以下ckEditor指令。在下面的示例中,我看到了两个有关如何在编辑器中设置数据的示例的两种变体:

app.directive('ckEditor', [function () {
    return {
        require: '?ngModel',
        link: function ($scope, elm, attr, ngModel) {

            var ck = null;
            var config = attr.editorSize;
            if (config == 'wide') {
                ck = CKEDITOR.replace(elm[0], { customConfig: 'config-wide.js' });
            } else {
                ck = CKEDITOR.replace(elm[0], { customConfig: 'config-narrow.js' });
            }


            function updateModel() {
                $scope.$apply(function () {
                    ngModel.$setViewValue(ck.getData());
                });
            }

            $scope.$on('modalObjectSet', function (e, modalData) {
                // force a call to render
                ngModel.$render();
            });

            ck.on('change', updateModel);
            ck.on('mode', updateModel);
            ck.on('key', updateModel);
            ck.on('dataReady', updateModel);

            ck.on('instanceReady', function () {
                ngModel.$render();
            });

            ck.on('insertElement', function () {
                setTimeout(function () {
                    $scope.$apply(function () {
                        ngModel.$setViewValue(ck.getData());
                    });
                }, 1000);
            });

            ngModel.$render = function (value) {
                ck.setData(ngModel.$modelValue);
            };

            ngModel.$render = function (value) {
                ck.setData(ngModel.$viewValue);
            };
        }
    };
}])

有人可以告诉我有什么区别:

ck.setData(ngModel.$modelValue);
ck.setData(ngModel.$viewValue);

而我应该使用。我看了一下角度文档,上面写着:

$viewValue

Actual string value in the view.

$modelValue

The value in the model, that the control is bound to.

我不知道作者在文档中写这个是什么意思:-(


问题答案:

您正在寻找正确的文档,但可能只是您有些困惑。该$modelValue$viewValue有一个明显的区别。就是这个:

如前所述:

$viewValue:视图中的实际字符串 (或对象 值。
$modelValue:模型中控件绑定到的值。

我要假设您的ngModel是指<input />元素…?所以您<input>有一个字符串值可以显示给用户,对吗?但是实际模型可能是该字符串的其他版本。例如,输入可能显示字符串,'200'但是<input type="number">(例如)实际上将包含一个200作为整数的模型值。因此,您在中“查看”的字符串表示形式<input>ngModel.$viewValue,数字表示形式是ngModel.$modelValue

另一个示例是,<input type="date">其中$viewValue会类似于Jan 01, 2000,而$modelValue则将是Date代表该日期字符串的实际javascript 对象。那有意义吗?

我希望能回答您的问题。



 类似资料:
  • 问题内容: 我正在编写需要隔离范围的指令,但是我想通过ngModel将其绑定到父范围。 这里的问题是父级的范围值未更改。 标记 JS 演示:小提琴。 如果我不对指令使用隔离范围,则此方法效果很好 演示:小提琴。 问题答案: 原因是因为您正在为指令创建隔离范围,所以同一元素上的指令也将获得该隔离范围。这意味着您有两个彼此不连接的不同作用域,它们都具有分别更改的属性。我想您可以通过以下代码举例说明:

  • 我有一个要求,我需要将电话号码绑定到ngModel,只要它存在。我的代码如下: 如果电话号码存在,这很好,但如果不存在,我得到以下错误: 无法读取未定义的属性“full_number” 因此,基于这个SO帖子链接,我尝试了以下内容: 但是,这会导致语法错误。 未捕获错误:模板解析错误 解决此问题的一种方法是使用并再次重复代码集。但是,我应该做些什么来进行内联操作,比如三元条件检查?

  • 我正试图从我的角形中得到一些信息。我想在打字时看到输入。我得到这个错误: 这是我的表单html模板。我将ngModel放在表单输入中,我试图通过{{model.name}}绑定键入并查看我的输入。: 这是我的表单组件: 这是我app.module.ts的一部分,我在其中导入了Forms模块: 另外,如果你想查看所有代码,这里是 github 存储库。

  • 问题内容: 我以不同的形式发布了相同的问题,但没有人回答。我没有清楚了解angular js中Formatter和Parsers的功能。 根据定义,格式化程序和解析器都与我相似。也许我错了,因为我是这个angularjs的新手。 格式化程序定义 每当模型值更改时,作为管道执行的函数数组。 依次调用每个函数,将值传递给下一个。用于格式化/转换值以在控件和验证中显示。 解析器定义 每当控件从DOM读取

  • 看起来您在与FormControlName相同的表单字段上使用了ngModel。在Angular v6中不支持使用ngModel input属性和ngModelChange事件,并将在Angular v7中删除 有关这方面的更多信息,请参见我们的API文档:https://angular.io/API/forms/formControlName#use-with-ngmodel 它到底说了什么?链

  • 我从官方网站学习Angular 4,我通过ngModel学习了双向数据绑定部分。但是,只要我将[(ngModel)]添加到组件模板中,我的应用程序就会停止工作,即使FormsModule已导入模块中。ts文件。组件未加载 我正在使用Visual Studio代码<这是我的应用程序。组成部分ts 这是一个应用程序。单元ts AppComponent没有加载,只是显示 加载。。。