Dynamically loaded AngularJs code via ASP MVC are not bound

Question

I'm loading a Partial view which contains AngularJS code, using the code below:

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");});

This is how I render the partial:

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

And the filter:

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

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

The problem:

The rendered partial loads as HTML, but it contains code like this:

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

where h is the controller that loaded the .cshtml, and no click event is bound to the button.

Any ideas as to where I'm doing things wrong are greatly appreciated.

Progress

Thank you @user1620220 for the response. I added this right after 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);

and still no bindings are happening.

user1620220 · Accepted Answer · 2016-12-02 21:32:26Z

1

You are using $compile to generate a compiled node, but then you are calling html() to convert the node back to a string. ng-bind-html then converts the string into an uncompiled node and adds it to the DOM.

~~Instead, just pass res.data to ng-bind-html, allow the digest loop to run, then compile the in-situ DOM node.~~

Edit: After reading your edit, it occurred to me you need to use the cloneAttachFn returned by $compile. Here is my new proposed solution:

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);

edited Dec 2, 2016 at 21:32

answered Dec 2, 2016 at 14:03

user1620220

1,3159 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gimmly Over a year ago

thank you for the response, taught me an important thing as well as giving me hope,. I updated the question.

Gimmly Over a year ago

I did as you said and Everything works! Thank you so much! It's awesome!

Collectives™ on Stack Overflow

Dynamically loaded AngularJs code via ASP MVC are not bound

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related