Unlock the innerHTML of a DIV by clicking a button with ng-click in Angular JS

I am curious about something. There is a <div> and a <button> in my code. I am looking to access the inner markup of the <div> within the ng-click function without relying on jQuery. Can you give me some guidance?

<div id = text-entry-view contenteditable="true"></div>

<button class="btn btn-primary btn-block" ng-click='sendMsg()'>Send</button>

app.controller('ActiveController', ['$scope', 'contact', '$ManageLoggedInUsername', function($scope, contact, $ManageLoggedInUsername){
    $scope.loggedInUsername = $ManageLoggedInUsername.getUsername();
    $scope.contact = contact;
    $scope.sendMsg = function(){
        //console.log("MSG :: " + <div#text-entry-view.innerHTML>);
    }
}]);

I would like to retrieve the content of the <div> inside the sendMSG function. Any assistance would be greatly appreciated.

Answer №1

Instead of using AngularJS, why not stick to plain JavaScript for this scenario? Take a look at the example below.

$scope.sendMessage = function() {
    var content = document.getElementById('text-entry-view').innerHTML;
    console.log('MESSAGE :: ' + content);
}

JSFiddle Demo Link


If you still prefer to use AngularJS jqLite API, you can wrap your selector with angular.element() like so:

var content = angular.element(document.getElementById('text-entry-view')).html();

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

"Escape the confines of traditional div sections with the dynamic features of

In the beginning, I have arranged two rows of three divs on my webpage, which is how I intend to use them later. However, when testing the 'mobile view', the divs in the section overflow and move into the next part below the section. This causes ...

Refresh text displayed on a button with the help of setInterval

I need help updating the text on a button with the id fixed-button at regular intervals. Here is the code I am currently using: <script type="text/javascript"> $(function() { $('#fixed-button').setInterval(function() { ...

The Google column chart is displaying Y-axis values in a reversed order

Why are the Y axis values in my Google column chart showing in reverse order? Please see the result below. https://i.sstatic.net/gfNr2.png Here is my code snippet: HTML <script type="text/javascript" src="http://www.google.com/jsapi"></script& ...

Angular encountered an issue while attempting to load base64 images

I have encountered an issue in my Angular application while trying to load images downloaded from the server as base64. Although I am able to see the images in the app without any difficulty, there are some errors being displayed in the console: https://i ...

The PopupControlExtender in ajaxToolkit seems to be malfunctioning when used with a textbox that has Tinymce

I recently built a website using ASP.NET, and I have a feature where a small tooltip appears on the right side of a text box when the user focuses on it. To achieve this, I am using the ajaxToolkit:PopupControlExtender in my code. <asp:TextBox ...

Every time I attempt to load the table, I encounter an error

Encountering errors when attempting to load the table: 'Uncaught ReferenceError: usersArray is not defined at loadUsers (trgames.js:20:17) at trgames.js:22:1' and 'Uncaught TypeError: Cannot set properties of null (setting ...

Unable to access this context in Firefox debugger after promise is returned

I'm curious as to why the 'this' object is not showing up in the debugger in Firefox, but it does appear in Chrome's debugger. When I try to access 'this.myProperty', it shows as undefined. This is the code from my TypeScript ...

Ionic app encounters issue fetching local JSON data

I have been working on my Ionic application and I encountered an issue when trying to load local JSON data into it. I set up a http.get in my javascript to retrieve the data, but for some reason it's not showing up in the application. It seems like th ...

"Exploring the world of JavaFX: Unveiling the mysteries

Here are some CSS queries: How can I create a semi-transparent color using a color variable in CSS? * { -my-color: #123456; } .label { -fx-text-fill: ??? } What should be inserted in "???" to achieve a 50% opacity version of -my-color? Is it be ...

Merging Two Angular Pages within a Jhipster Application

My jhipster application is simple, generating 2 entities: Product and Category. The generated pages to list the data for these entities can be found here. Specifically, there are pages for Product and Category. If I want to create a new page that combines ...

A step-by-step guide on deleting an element within a div using jQuery

I am attempting to delete an HTML element using JQuery like this $('#' + divId + ' .settings_class').remove('.print_settings'); This code does not result in an error or remove the specified html element, however, the selecto ...

Combine two redux actions and access the modified state in the second action

I'm facing a dilemma with a straightforward problem that I believe I have a solution for, but I'm uncertain about the effectiveness of my idea. Essentially, in the current state of things, I have an array property that requires updating just bef ...

(Monetate) Resolving the issue of delayed transition between the <a> element and CSS arrow in the breadcrumb menu utilizing HTML/CSS/jQuery

Recently, I've been working on implementing a breadcrumb-style checkout progress indicator on my website using a code generator created by an incredible developer named Jonas Ohlsson. This feature utilizes HTML, CSS, and jQuery and is integrated into ...

Transferring temporary information from server to controller using angular-file-upload

Currently, I am utilizing the angular-file-upload library which can be found at this link: https://github.com/danialfarid/angular-file-upload. In the example provided on that page, data from a file is sent to the backend from a controller using the availab ...

What steps do I need to take to have Greasemonkey execute a function upon the completion of an AJAX call

Whenever I select the trending tab on YouTube, an AJAX call is triggered to retrieve the latest trending videos. I have developed a custom script that filters out any videos I have already watched. Although this script successfully applies to the homepag ...

What alternatives does jQuery offer instead of using setInterval for timing events?

One of the challenges I have encountered with my chat application is the use of setInterval(), where users receive chat messages every 2 seconds. Are there any better ways to enhance this chat application without relying on setInterval()? How can we contin ...

Interactive Sideways Navigation Bar

showcases a sleek horizontal scrolling menu on mobile devices. I aim to replicate this functionality for a website I'm redesigning that features extensive navigation elements. Key Features: Left and right scroll button options Centered list item op ...

I can't figure out why I'm receiving undefined even though all the variables are populated with the necessary

I have been working on a project that involves implementing email and password authentication using Firebase. However, I encountered an error when the user submits their credentials: FirebaseError: Firebase: Error (auth/admin-restricted-operation). at ...

Prevent mobile view from activating when zoomed in on the screen

I've built a webpage with a responsive design that adjusts to mobile view on mobile devices or when the screen size is reduced using developer tools. While this functionality works correctly, I have noticed that the design also switches to mobile vie ...

AngularJs - $watch feature is only functional when Chrome Developer Tools are active

My goal is to create a $watch function within a directive that monitors changes in the height and width of an element. This will allow the element to be centered on top of an image using the height and width values. Below is my app.js code: app.directive ...