Here is the code snippet I am working with:
<!doctype html>
<html ng-app="flyerGen">
<head>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
<script>
angular.module('flyerGen', []).directive('contenteditable', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
// view -> model
elm.bind('keyup', 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());
}
};
});
function FlyerCtrl($scope) {
$scope.Flyer = { bgColor : '231,233,230', title : 'WIE WAREN WIR HEUTE?', description: 'Bitte scannen Sie den QR-Code und geben Sie uns Feedback' }
}
</script>
</head>
<Body>
<div contentEditable ng-model="Flyer.title">{{ Flyer.title }}</div>
Test: {{ Flyer.title }}
</div>
</Body>
</html>
Upon loading the page, I encounter an error in my console stating: Error: No controller: ngModel. I have attempted using "FlyerCtrl" and "Flyer" instead of "ngModel", but to no avail.
Where might I be going wrong?