个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我正在编写一个需要隔离作用域的指令，但我想通过 ngModel 将它绑定(bind)到父作用域.
这里的问题是父级的范围值没有改变。
标记
<form name="myForm" ng-app="customControl">
<div ng-init="form.userContent"></div>
<div contenteditable name="myWidget" ng-model="form.userContent" required>Change me!</div>
<span ng-show="myForm.myWidget.$error.required">Required!</span>
<hr />
<textarea ng-model="form.userContent"></textarea>
</form>
angular.module('customControl', []).directive('contenteditable', function() {
return {
restrict : 'A', // only activate on element attribute
require : '?ngModel', // get a hold of NgModelController
scope: {},
link : function(scope, element, attrs, ngModel) {
if (!ngModel)
return; // do nothing if no ng-model
// Specify how UI should be updated
ngModel.$render = function() {
element.html(ngModel.$viewValue || '');
};
// Listen for change events to enable binding
element.bind('blur keyup change', function() {
scope.$apply(read);
});
read(); // initialize
// Write data to the model
function read() {
ngModel.$setViewValue(element.html());
}
}
};
});
最佳答案
原因是因为您正在为您的 contenteditable 创建一个隔离范围。指令，ng-model同一元素上的指令也会获得该隔离范围。这意味着您有两个不相互连接的不同范围，它们都有 form.userContent单独更改的属性。我想您可以通过以下代码来举例说明:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('Ctrl', function($scope) {
})
.directive('contenteditable', function() {
return {
restrict : 'A', // only activate on element attribute
require : '?ngModel', // get a hold of NgModelController
scope: {},
link : function(scope, element, attrs, ngModel) {
if (!ngModel)
return; // do nothing if no ng-model
setInterval(function() {
if (angular.element('#contenteditable').scope().form)
console.log(angular.element('#contenteditable').scope().form.userContent);
if (angular.element('#textarea').scope().form)
console.log(angular.element('#textarea').scope().form.userContent);
}, 1000);
// Specify how UI should be updated
ngModel.$render = function() {
element.html(ngModel.$viewValue || '');
};
// Listen for change events to enable binding
element.bind('blur keyup change', function() {
scope.$apply(read);
});
read(); // initialize
// Write data to the model
function read() {
ngModel.$setViewValue(element.html());
}
}
};
});
</script>
</head>
<body ng-controller="Ctrl">
<form name="myForm">
<div ng-init="form.userContent"></div>
<div contenteditable name="myWidget" ng-model="form.userContent" id="contenteditable" required>Change me!</div>
<span ng-show="myForm.myWidget.$error.required">Required!</span>
<hr />
<textarea ng-model="form.userContent" id="textarea"></textarea>
</form>
</body>
</html>
form.userContent如果您更改 textarea 中的文本或更改 contenteditable div 中的文本，它们会单独更改。
...
scope: {}
...
...
scope: {
model: '=ngModel'
}
....
model您的隔离范围上的属性是对
form.userContent 的引用在您的父范围内。但是
ng-model不是在寻找
model属性，它正在寻找
form.userProperty在我们孤立的范围内仍然不存在。所以为了解决这个问题，我们在链接函数中添加了这个:
scope.$watch('model', function() {
scope.$eval(attrs.ngModel + ' = model');
});
scope.$watch(attrs.ngModel, function(val) {
scope.model = val;
});
form.userContent来自我们对我们孤立的
form.userContent 的指令之外的内容，第二个监视确保我们在隔离的
form.userContent 上传播任何更改直到父范围。
关于angularjs - 为什么 ngModel.$setViewValue(...) 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15269737/
28
4
0
我目前理解 [(ngModel)]="expression" 是从组件到 View 的双向绑定(bind)，反之亦然。我也明白 [ngModel]="expression" 是单向绑定(bind)(我
我实际上是在重复一个 mat 输入字段，然后我用数组中对象的属性名称编写了 [(ngModel)] 作为 [(ngModel)] 的值 例如这是我拥有的对象数组: test = [{name: 'Ha
我正在观看的 Udemy Angular 6 视频显示使用第一种语法。但是，我使用 WebStorm 作为我的 IDE，当我使用 [(ngModel)]="variable" 语法时，它不会提供任何类
我正在尝试用 Angular 数组绘制 radioBoxes，然后获取选中的 radio 的值，但是模型不会改变它的值吗，有人可以帮我吗？ HTML部分
我有以下 ckEditor 指令。底部是我从有关如何在编辑器中设置数据的示例中看到的两种变体: app.directive('ckEditor', [function () { return
这是一个模板示例: 这里他们两个做同样的事情。首选哪一个？为什么？ 最佳答案 [(ngModel)]="overRideRate" 是 [ngModel]="overRideRate"的缩写形式
我得到的是一个动态生成的 ngModel 对象，并且某些不在顶层的属性仅在一个方向上绑定(bind)。 包括一个应该让事情变得更清晰的 plunkr，但我想做的是生成一个动态表单，并且如果属性嵌套在根
嗨，哪个更好？有什么区别？有什么优点和缺点？ 这是两者的对比代码: 范围:{ ngModel:'=' } app = angular.module('app', []); a
我正在尝试根据 angularjs 中的某些属性绑定(bind)未知的数组索引。 //javascript method inside controller functio
我试图在 ngFor 循环中输入具有正则表达式要求的输入，但收到“无法读取未定义的属性‘有效’”错误，我将其用作页面加载时弹出的错误消息。 这是我目前的代码: (我拥有的键管道是一个自定义管道，因为
我正在尝试将 ngControl 表单验证添加到 Angualr js 2 中的 bootstrap 4 typehead 控件。代码如下。 {{ requ
[(ngModel)] 在表单标签内不工作 当我使用 Multi Select Outside Form 标签时，可以正常选择 All 和取消选择所有功能 但是当我把它放入 Form 里面时，它正在工
假设我想要一个指令，它接受用户在输入中键入的内容并将其转换为小写。 所以我想出了一个这样的指令(在这个 Plunker http://plnkr.co/edit/jnE3s8MRr1tFCX0WVYe
我的名为 datePicker 的指令位于输入元素上，它从模型中获取公历日期并将其转换为最终用户的波斯日期。 从 datePicker 更改日期(这里是 jalali(波斯日期选择器))，转换为 gr
在这个例子中，我看到了解释，但我仍然不确定我为什么在这种情况下将#name 模板变量设置为“ngModel”。如果有 2 或 3 个其他带有模板变量的输入字段，您是否也将它们的值设置为“ngModel
这是我的 HTML 代码: Start 因此，startDate 存储为数字(长整型)，但我想显示本地日期时间。我真的不知道该怎么做。我使用相同的组件来创建和更新模型。创建工作正常，因为
喜欢在 this question ，我要加.error在表单域的父级 .control-group当scope.$invalid是真的。 但是，像 ng-class="{ error: formNa
我正在尝试为颜色选择器创建指令，但 ngModel 值的值未更新。知道出了什么问题吗？ 这是我的代码: .directive('colpkr', [function () {
我不是 Angular 事件方面的专家，但这是我的问题。如果我运行以下代码，我基本上会用错误的信息更新后端，因为 item.their_platform 在 togglePlatform() 触发之前
我有这个数组试图在我的模板中显示，不知何故它无法正确显示。如果我这样做 [value]，它将给我正确的值，但 ofc。不绑定(bind)到数组和值。 大批: {"pluNo":1,"pluName":
我是一名优秀的程序员,十分优秀！