编辑
这是一个基于Angular文档中示例的示例,该示例仅使用
ng-repeat。由于
ng-repeat为每次迭代都创建了一个新的作用域,所以这不是问题。
<!doctype html><html ng-app="form-example2"><head> <script src="http://pre.angularjs.org/1.0.5/angular.min.js"></script> <script> angular.module('form-example2', []).directive('contenteditable', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { // view -> model elm.bind('blur', function() { scope.$apply(function() { ctrl.$setViewValue(elm.html()); }); }); // model -> view ctrl.$render = function() { elm.html(ctrl.$viewValue); }; // load init value from DOM ctrl.$setViewValue(elm.html()); } }; }); </script></head><body> <div ng-repeat="i in [1, 2, 3]"> <div contentEditable="true" ng-model="content" title="Click to edit">Some</div> <pre>model = {{content}}</pre> </div> <style type="text/css"> div[contentEditable] { cursor: pointer; background-color: #D0D0D0; } </style></body></html>原版的
这里有一个示例,说明了如何做到这一点:http :
//docs.angularjs.org/guide/forms
它在“实现自定义表单控件(使用ngModel)”标题下。



