我有以下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没有加载,只是显示 加载。。。