Encountering a Problem with ContentEditable in AngularJS

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?

Answer №1

Here are a couple of important points to consider:

  • Ensure that in your HTML you use contenteditable instead of contentEditable
  • Avoid loading the initial value from the DOM when it's already available in your model. Remove this line from your HTML: <div...>{{ Flyer.title }}</div> and avoid calling $setViewValue initially.

For an example, check out this Plunker.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtaining the URL of the Parent Page Using Javascript

I encountered a situation in which, when I open a modal window dialog from Page1.aspx, if a user attempts to directly open that dialog by copying the URL and pasting it into the browser, I want to prevent the modal window from opening. It should only open ...

How about sending cookies to different controllers?

We are currently developing a Spring-based application that consists of multiple controllers catering to different modules such as user authentication and analytics jobs. The issue we encountered involves setting cookies in our user controller for authenti ...

What is the best way to assign the innerText/innerContent of a list with the values from a multidimensional array?

As a newcomer to JavaScript, I apologize if the code is not up to par. My goal is to allow users to select a state from a form and display 5 cities. This is the current code snippet: HTML with Bootstrap classes <div class="row row1"> <div class= ...

Is there a way in JS to wipe out all methods, classes, setTimouts, and setIntervals in one swift action?

I am working on creating an animation with a class that involves calling other classes, methods of other classes, setTimeouts, and more. My current task is to implement an exit button for this animation. When this button is clicked, I need all the classes, ...

When encountering duplicates within an array, I must ensure that the complete structure of the array is preserved and stored in MongoDB

I have encountered a situation where I am looping through an array and need to save the data in a MongoDB database. However, I need to avoid duplicating the array's indexes. I was thinking of using a filter to achieve this, but I'm concerned abou ...

When the link_to element is clicked, use AJAX to replace the content of a specific

I was wondering about a modification to the link in view/users/show: <%= link_to "Photos (#{@user.photos.count})", user_path(@user), id: "photo_link", remote: true %> My goal is to dynamically change [1..6] to [1..-1] without having to rerender the ...

Utilize the event bus by calling `this.$root.$emit` command

I recently implemented a basic Event bus in my application to dynamically change styles on a page, and it's functioning correctly. The event bus is triggered using the $emit and $on methods as shown below: EventBus.$on and EventBus.$emit('call ...

What is the reason the useEffect hook does not function properly with a state variable within context?

Check out my code here. I'm trying to display the content of the array testingData, but it's not showing up. If I remove the useEffect hook, it works fine. Can you help me understand why and how to fix it? ...

What is the best way to display items within a table using React?

I'm just starting to learn React. Can someone show me how to use the "map" function to list elements from two different arrays in two columns? state = { dates: ["2000", "2001", "2002"], cases: ["1", "2", "3"] } render() { return ( <thea ...

React component not rendering iteration over Set in JSX

I need help figuring out how to iterate through a JavaScript Set() that is being passed down in props within a React component. I am struggling to get anything to display on the screen when attempting to loop through it: {selectedCity.forEach((key, v ...

Using Bootstrap Multiselect and making AJAX GET requests with nested objects

I'm having difficulties with retrieving nested objects using $.ajax and dynamically populating Bootstrap Multiselect dropdown select options. This issue is similar to the ones discussed in the following Stack Overflow threads: Issue with Data returnin ...

The attribute 'checked' is not a valid property for the 'TElement' type

Learning about typescript is new to me. I have a functional prototype in fiddle, where there are no errors if I use this code. http://jsfiddle.net/61ufvtpj/2/ But in typescript, when I utilize this line - if(this.checked){ it presents an error [ts] Pro ...

The Importance of Strict Contextual Escaping in ReactJS

When making an API call, we receive a URL in the response. In Angular JS, we can ensure the safety of this URL by using $sce.trustAsResourceUrl. Is there an equivalent function to trustAsResourceUrl in React JS? In Angular, //Assuming 'response&apos ...

Issue with the Styled Components Color Picker display

For the past 6 months, I have been using VSCode with React and Styled Components without any issues. However, recently I encountered a problem where the color picker would not show up when using CSS properties related to color. Usually, a quick reload or r ...

What's the significance of & in TypeScript and JavaScript?

While exploring someone else's code, I came across this interesting piece related to the props of a React component. Although I'm aware that & is typically used as an AND logical operator, it seems to have a different significance in this con ...

Saving a JSON array into separate JS variables using AJAX

I need to extract multiple values from a mySQL Query and store them in different JS Variables. Below is the AJAX code in my JS file: $.ajax({ async:false, url: "get_data.php", type: "POST", data: { d1: 'd ...

Using Jquery to set values for css properties

I've recently started using jquery and I have a task related to a drop-down menu that I'm struggling with: if (scrnwidth <= 761) { if (display was block) { //Defaultly testi has display:none property. testi = m ...

Axios error in Express middleware - unable to send headers once they have been processed

I can't seem to figure out why my code is not running correctly. While using Axios in my middleware, I am encountering this error message: Error: Can't set headers after they are sent. This is the snippet of my code (utilizing Lodash forEach): ...

Remove any URLs and replace them with a text corresponding to the ID of the selected link

I need assistance with a JavaScript code. I have three links, each with a different ID. What I am trying to achieve is that when I click on one of these links, the script should grab the ID, delete all three links, and replace them with text in their place ...

Issue with updating dropdown values in real-time in React

I am a beginner with React and I have a question regarding fetching dropdown values from the backend. Despite using async-await functions, the list is not getting populated with items. Any assistance in this matter would be greatly appreciated. Here is th ...