Calling a function using AngularJS

Question

I am working on application in AngularJs

Here is my code :

HTML

<div ng-controller="MainController as main" class="containerWrap">
..
..
..
<p ng-bind-html="parseMsg(msg)"></p>
..
..

The parseMsg function passes the msg filled by the user to the controller JS defined as follows :

this.parseMsg=function(msg){
...
...
    if(msg['subtype']==FILES_UPLOADING){
        $scope.showUploadOptions=true;
        var per=parseInt(msg['text']);
        if(per==100)
            msg['text']='<div ng-if="showUploadOptions"><img ng-src="logo.png"  ng-click="main.cancelFileUpload(chat,msg_id)"/></div>';
        return $sce.trustAsHtml(msg['text']);
    }
...
...
...
};

Chat and msg_id being passed to the main.cancelFileUpload are stored previously as:

$scope.chat = (object)
$scope.msg_id =(object) 

this.cancelFileUpload=function(chat,msg_id){
        alert("Cancel clicked ");
        delete this.retryUploadFiles[msg_id];
        delete chat.msgs[msg_id];
    };

What I am trying to do is cancel the file upload being sent during the server request using a click on an image.

This ng-click is not responding. It doesn't give an error but doesn't function properly either.

Can anyone help identify the issues?

Thanks!

Answer 1

ngBindHtml don't compile your HTML. So, all angular directives from your dynamic HTML(ng-if, ng-src, ng-click, etc..) will not work.

To really compile your html you can use $compile service like that:

$compile(html)($scope)

But it's not a true way for angular. If you want to modify DOM structure - you need to use directives. In your case you can include that html to template itself instead of add it dynamically:

<div ng-show="showYourHtml">
    <img ng-src="logo.png"
         ng-click="main.cancelFileUpload(chat,msg_id)"/>
</div>

And your controler:

...
if(conditions){
    $scope.showYourHtml = true;
}
...