[英]How to get the content out of an editable div in angularjs
我正在尝试从可编辑的div中获取内容。 但是我一直坚持为其实现角度模板。
我不确定如何将模型数据从html模板映射到角度控制器。
<div ng-repeat="todo in todos">
<div class="todo.id" ng-model={{ ? }} contenteditable="true">
<pre>{{ todo.text }}</pre>
</div>
<button type="button" class="btn btn-link"
ng-click="editTodo(todo.id)">Edit</button>
</div>
我想传递任何文字
<div class="todo.id"></div>
由于我的div在ng-repeat下,因此我无法将ng-model设置为一个作用域变量。
我应该在“ ng-model = {{??}}”中包含什么。 还是有针对这种情况的解决方法。
请指导我。
要使div内容可按角度进行编辑,您需要创建一个contenteditable指令。
这里的角度文档中有一个示例:
https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#custom-control-example
以及来自Gabo Esquivel的关于该主题的精彩博客文章: http : //gaboesquivel.com/blog/2014/in-place-editing-with-contenteditable-and-angularjs/
如您在加百利(Gabriel)的示例中所见,此类指令的代码将如下所示(我添加了一些注释以更好地了解发生了什么事情):
app.directive("contenteditable", function() {
return {
require: "ngModel",
link: function(scope, element, attrs, ngModel) {
//read the text typed in the div (syncing model with the view)
function read() {
ngModel.$setViewValue(element.html());
}
//render the data now in your model into your view
//$render is invoked when the modelvalue differs from the viewvalue
//see documentation: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#
ngModel.$render = function() {
element.html(ngModel.$viewValue || "");
};
//do this whenever someone starts typing
element.bind("blur keyup change", function() {
scope.$apply(read);
});
}
};
});
祝好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.