動態加載經由ASP MVC AngularJs代碼不結合

Question

我加載包含AngularJS代碼的局部視圖，使用下面的代碼：

http.post("/Admin/LoadPartial", { 
path: "~/Views/Admin/Urchin/Modals/_ChangeHero.cshtml", 
model: self.newID 
}).then(function (res) { 

//res.data is the .cshtml      
var element = angular.element(res.data); 
var modal = $compile(element)(scope); 
self.newSlides.push({ 
    "ID": self.newID, 
    "Data": self.newData, 
    "Modal": modal.html() 
}); 

scope.$emit("ngRepeatFinished"); 
Notify.Show("Saul goodman", "notice");}); 

這是我的渲染部分：

<div ng-repeat="item in h.newSlides" 
    ng-bind-html="item.Modal | to_trusted" id="Hey-{{item.ID}}"></div> 

和過濾器：

.filter('to_trusted', ['$sce', function ($sce) { 
    return function (text) { 

     return $sce.trustAsHtml(text); 
    }; 
}]) 

問題：

渲染部分負荷爲HTML，但它包含這樣的代碼：

<button id="bgProg-@Model" class="progress-button" ng-click="h.EditBG()"> 

其中h是加載的.cshtml控制器，並且沒有點擊事件被綁定到按鈕。

任何有關我做錯事情的想法都非常感謝。

---

進展

謝謝@ user1620220響應。 我加入這個權利Notify.Show(..後：

timeout(function() { 
var what = document.getElementById("Hey-" + self.newID); 
var element = angular.element(what); 
var modal = $compile(element)(scope); 
what.innerHTML = content;}, 0, false); 

，仍然沒有綁定發生。

Answer 1

您正在使用$compile來生成已編譯的節點，但此時您正在調用html()將該節點轉換回字符串。然後ng-bind-html將字符串轉換爲未編譯的節點並將其添加到DOM。

取而代之，只需通過 res.data至 ng-bind-html，允許摘要循環運行，然後編譯原位DOM節點。

編輯：讀你的編輯後，我突然想到，你需要使用$compile返回的cloneAttachFn。這是我的新提議的解決方案：

HTML：

<div ng-repeat="item in h.newSlides"> 
    <div id="Hey-{{item.ID}}"><!--place holder--></div> 
</div> 

JS：

var linkFn = $compile(res.data); 
timeout(function() { 
    self.newSlides.forEach((slide) => { 
     var what = document.getElementById("Hey-" + slide.ID); 
     linkFn(scope,(clone) => { 
      what.parentNode.replaceChild(clone, what); 
     });   
    });   
}, 0, false);