使用AngularJS調用函數

Question

我正在研究AngularJs中的應用程序

這是我的代碼：

HTML

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

parseMsg函數將用戶填充的msg傳遞給控制器​​JS，定義如下：

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和傳遞給main.cancelFileUpload的msg_id先前存儲為：

$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];
    };

我想要做的是取消在服務器請求期間使用單擊圖像發送的文件上傳。

此ng-click沒有響應。 它不會給出錯誤但也無法正常運行。

任何人都可以幫助確定問題嗎？

謝謝！

Answer 1

ngBindHtml不編譯您的HTML。 因此，來自動態HTML（ng-if，ng-src，ng-click等等）的所有角度指令都不起作用。

要真正編譯你的html，你可以使用$ compile服務：

$compile(html)($scope)

但這不是角度的真正方式 。 如果要修改DOM結構 - 需要使用指令。 在您的情況下，您可以將html包含到模板本身而不是動態添加它：

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

而你的控制器：

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