Is it not possible to set value from parent scope to contentEditable directive via isolated scope using two-way binding?
Code here: http://jsfiddle.net/bharatwaj/3wTd3/5
HTML:
<input ng-model="foo" />
<div contentEditable="true" binding-foo="foo" ng-model="input.name" title="Click to edit"></div>
<pre>model = {{input.name}}</pre>
JS:
angular.module('form-example2', []).directive('contenteditable', function () {
return {
scope: {
isolatedBindingFoo: '=bindingFoo'
},
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
console.log('isolatedBindingFoo value is ' + scope.isolatedBindingFoo);
// view -> model
elm.bind('blur', function () {
scope.$apply(function () {
ctrl.$setViewValue(scope.isolatedBindingfoo);
});
});
// model -> view
ctrl.$render = function () {
elm.html(ctrl.$viewValue);
};
// load init value from DOM
// Why is content editable value displayed as Hello!
// after setting view value below?
ctrl.$setViewValue(scope.isolatedBindingFoo);
}
};
});
function ItemCtl($scope) {
$scope.foo = 'Hello!';
}
I have a ng-model which is set to 'Hello!' in controller and is two-binding to content editable div
shouldn't contentEditable div display Hello!?
Note: It is possible to set by interpolate like below but i would like to know if it not possible to set via two-binding in scope.
{{foo}}