current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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.

share|improve this question
up vote 1 down vote accepted

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);
share|improve this answer
    
thank you for the response, taught me an important thing as well as giving me hope,. I updated the question. – Gimmly 19 hours ago
    
I did as you said and Everything works! Thank you so much! It's awesome! – Gimmly 14 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.