What is the best method for embedding <ng-click> in a string within Endpoint.java and then returning this string to the client side?

Question

What is the best method for embedding <ng-click> in a string within Endpoint.java and then returning this string to the client side?

I'm currently developing a messaging feature within a Chat application that facilitates communication between logged in users via the Web Socket protocol. In order to enhance user interaction, I am looking to incorporate a reply option into each message. I attempted to nest a link tagged with reply within the message, along with an angular tag using ng-click to trigger a modal window for replying (as shown below).

The ng-click content consists of a function that takes the message ID as input for replying.

However, my issue arises when clicking on reply - the reply modal appears but the designated function is not executed!

Below is the snippet from ChatEndPoint.java:

String m="<div>
             <div>" + 
                 _content 
          + "</div>  &nbsp; 
             <a href='#' data-toggle='modal' data-target='#replyModal'
              ng-click='storemsgid("+_msgid+")'><small>reply</small></a>
          </div> ";

Key Points:

The variable _content holds a String value and _msgid contains an Integer value.
_content is displayed in the chat console.
A function called storemsgid(id) exists in the HTML page, which is functional and not causing issues.
The new message will be added to the chat console (contained within a div tag) with its own ng-controller, including the storemsgid(id) function.

I would greatly appreciate any assistance or guidance on this matter.

Thank you

javascript java angularjs websocket endpoint

Answer 1

Answer №1

Implement the ng-bind-html directive to dynamically insert HTML content from a controller:

  <body ng-app="myApp" ng-controller="myVm as vm">
    <h1>Creating Click Handlers with AngularJS</h1>
    <p>{{vm.rawMsg}}</p>

    <div ng-bind-html="vm.msg"></div>

  </body>

JavaScript:

app.controller("myVm", function($sce) {
  var vm = this;
  vm.rawMsg = '<button onclick="angular.element(this).scope().vm.alert(99)">Alert 99</button>'
  vm.msg = $sce.trustAsHtml(vm.rawMsg);

  vm.alert = (x) => alert(x);
})

The ng-bind-html directive doesn't support compiling AngularJS directives like ng-click. Instead, utilize the onclick attribute in conjunction with angular.element for invoking scope functions:

<button onclick="angular.element(this).scope().vm.alert(99)">
   Alert 99
</button>

Check out the DEMO on PLNKR.

Answer 2

Implement the ng-bind-html directive to dynamically insert HTML content from a controller:

  <body ng-app="myApp" ng-controller="myVm as vm">
    <h1>Creating Click Handlers with AngularJS</h1>
    <p>{{vm.rawMsg}}</p>

    <div ng-bind-html="vm.msg"></div>

  </body>

JavaScript:

app.controller("myVm", function($sce) {
  var vm = this;
  vm.rawMsg = '<button onclick="angular.element(this).scope().vm.alert(99)">Alert 99</button>'
  vm.msg = $sce.trustAsHtml(vm.rawMsg);

  vm.alert = (x) => alert(x);
})

The ng-bind-html directive doesn't support compiling AngularJS directives like ng-click. Instead, utilize the onclick attribute in conjunction with angular.element for invoking scope functions:

<button onclick="angular.element(this).scope().vm.alert(99)">
   Alert 99
</button>

Check out the DEMO on PLNKR.

What is the best method for embedding <ng-click> in a string within Endpoint.java and then returning this string to the client side?

Answer №1

Similar questions

What type of JavaScript scope is accessible by an anchor tag's href attribute?

What could be causing my Angular JS application to malfunction?

Create a React MUI component that allows menu items to become sticky when selected

How to Extract Nested JSON Data in Java using Regular Expressions

Angular-datatables has a scroller function that allows for easy navigation within the content of

Concealing a div class using javascript

Maintain the visibility of the jQuery dropdown menu even when navigating to a different page within the

Encountering Error 1 in Cordova File Transfer with Laravel Framework

All you need to know about the AngularJS Toggle functionality

Appium - Exploring the Wonders of Android Hybrid Apps

I am having trouble with the prime number finder in my JavaScript program. It seems to not work for certain values. What could be

When the mouse button is released or when an event listener is

"Encountering an issue with Next.js where the Redux

Show the button's value on the text box using JavaScript

Storing data retrieved from an asynchronous call in AngularJS to a variable

Experiencing an "ENOTFOUND" error after attempting to make a large volume of API calls, possibly in the range of 100,000, to maps.google

Determine if two instances are within the same week, where each week starts on Friday and ends on Thursday, using moment.js

Include an image in a Material-UI card without specifying a file path

Converting a single 10GB zip file into five separate 2GB files with the help of NodeJS

The forked library fails to generate a dist folder within the node-modules directory