原因是因为您正在为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-modelsetInterval(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 updatedngModel.$render = function() { element.html(ngModel.$viewValue || ’’);};// Listen for change events to enable bindingelement.bind(’blur keyup change’, function() { scope.$apply(read);});read(); // initialize// Write data to the modelfunction 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' 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中的文本或更改了contenteditablediv中的文本，则它们分别更改。
因此，我敢打赌您在考虑“有足够的解释，然后给我解决方案！”。嗯，（据我所知）没有一个很好的解决方案，但是有一个可行的解决方案。您要做的是将模型的引用带入隔离的范围，并确保模型在隔离范围中的名称与父范围中的名称相同。
这是您要做的，而不是像这样创建一个空作用域：
...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将来自指令外部的更改同步到我们的Isolatedform.userContent，第二个监视确保我们将隔离form.userContent上的所有更改传播到父作用域。
我意识到这是一个冗长的答案，而且可能不太容易遵循。因此，我很乐意澄清您觉得模糊的所有内容。
解决方法我正在编写需要隔离范围的指令，但是我想通过ngModel将其绑定到父范围。
这里的问题是父级的范围值未更改。
标记
<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>
JS
angular.module(’customControl’,[]).directive(’contenteditable’,function() { return {restrict : ’A’,// only activate on element attributerequire : ’?ngModel’,// get a hold of NgModelControllerscope: {},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()); }} };});
演示：小提琴。
如果我不对指令使用隔离范围，则此方法效果很好
演示：小提琴。
