ng-click is not working in kendo editor

Question

I'm trying to insert an html tag with ng-click event in the kendo editor. When I get the inserted data and show in a div, ng-click is not working. The normal onclick in javascript is working fine, but ng-click is not.

The below given is the <a> tag inserted on the editor text area.

<a ng-click="testMsg()"><span>' + nodeId + '</span></a>

Any idea on how to resolve this ?

Answer 1

onclick is DOM native event handler but ng-click isn't. Only those functions that are registered in the scope will be available. Any built-in functions will NOT be available to ng-click without an explicit assignment to the scope as my example shows.

var app = angular.module('app1', []);
app.controller('ctrl1', ['$scope', function($scope) {
  function testMsg() {
    alert('Hello world');
  }
  
  $scope.goodTestMsg = testMsg;
}]);

<div ng-app="app1" ng-controller="ctrl1">
  <p ng-click="goodTestMsg()">Click me will show a message</p>
  <p ng-click="testMsg()">Click me should happen nothing</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

TL;DR: The method testMsg is not exposed to the controller scope. Try adding something like $scope.testMsg = testMsg; will solve your problem.

Answer 2

Instead of textarea, try using div. I am facing similar problem which was partially solved with div. However it will be inline editing as the toolbar will get hidden and it will be displayed only when you focus cursor on the div.