कारण यह है कि चूंकि आप अपने 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 उन पर अलग से बदलने के लिए यदि आप पाठ क्षेत्र में पाठ बदलने के लिए या कर रहे हैं आप के परिवर्तित होने अपने संतुष्ट div में पाठ।
तो मुझे यकीन है कि आप सोच रहे हैं "समझाओ और मुझे समाधान दिखाएं!"। खैर, मेरे (मेरे ज्ञान के लिए) इस के लिए एक सुंदर समाधान नहीं है, लेकिन एक ऐसा काम करता है जो काम करता है। आप जो करना चाहते हैं वह मॉडल को आपके अलग-अलग दायरे में संदर्भित करता है, और सुनिश्चित करें कि आपके अलग-अलग दायरे में समान नाम है जैसा कि मूल दायरे में है। आप इस तरह के मॉडल के लिए बाध्य
...
scope: {}
...
:
यहाँ आप क्या करना है, बजाय इस तरह एक खाली गुंजाइश बनाने की
...
scope: {
model: '=ngModel'
}
....
अब आप अपने अलग गुंजाइश पर एक model संपत्ति है आपके माता-पिता के दायरे पर form.userContent का संदर्भ है। लेकिन ng-modelmodel संपत्ति की तलाश नहीं कर रहा है, यह 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 पर माता-पिता के दायरे तक।
मुझे एहसास है कि यह एक लंबा जवाब है, और शायद पालन करना बहुत आसान नहीं है। इसलिए मुझे कुछ भी स्पष्ट करने में खुशी होगी जो आपको लगता है कि धुंधला है।
चाहिए नहीं 'element.html (ngModel $ viewValue ...।) होना' element.html ($ sce.getTrustedHtml (ngModel $। viewValue) ..) मुझे पता है कि यह लगभग ng दस्तावेज़ उदाहरण के समान ही है, लेकिन मैंने अभी यह पाया है कि यह प्रभावी रूप से xss सुरक्षा को बाईपास करता है। – cirrus
@arun क्या आप समझा सकते हैं कि अलग-अलग दायरे क्यों काम नहीं कर रहा है? – geckob
पुन @ सीरसस टिप्पणी, मुझे लगता है कि एक्सएसएस से बचने के लिए, जब भी तत्व में कुछ भी रखा जाता है, इसे पहले $ sanitize (यानी एचटीएमएल पर भरोसा नहीं) के साथ स्वच्छ किया जाना चाहिए। Element.html की तरह कुछ ($ sanitize (ngModel। $ ViewValue)) '। – Soferio