0

I know I've had this happen before but not in exactly this way and I'm having trouble making the necessary changes.

I have a div that starts out empty and hidden as part of a gallery. When I click an image, it populates the div and shows it. Along with the image/content, there's some navigation elements as well. Thing is, those are also dynamically generated and not working since the angular needs to recompile. Here's the function that populates:

    $scope.picturePop = function(picID){
    match = $.grep($scope.gallery, function(obj) { return obj.id == picID; });
    pic = match[0].image;
    title = match[0].title;
    desc = match[0].desc;
    closediv = "<div id=\"divClose\" class=\"floatRight\" ng-click=\"closeParent();\">Close</div>";
    navDiv = "";
    if(picID > 1){
        prev = picID - 1;
        navDiv += "<div id=\"picNav\" ng-click=\"picturePop(" + prev + ")\">Previous</div>";
    }

    if(picID < $scope.picCount){
        next = picID + 1;
        navDiv += "<div id=\"picNav\" ng-click=\"picturePop(" + next + ");\">Next</div>";
    }

    $('#innerPictureDisplay').html(closediv + "<br/><br/><img src=\"images/paintings/" + pic + "\" /><p><b>" + title + "</b><\p><p>" + desc + "</p>"+ navDiv);
    $('#outerPictureDisplay').css('display','block');
};

How do I make that code "recompile" so that the "CLOSE" and navigational items work?

UPDATE

So, I changed my approach but I'm clearly still missing something:

my new HTML:

        <div id="outerPictureDisplay" ng-show="picID > 0">
        <div id="innerPictureDisplay">
        <div id="divClose" class="floatRight" ng-click="picID = 0;">Close</div>
        <div id="picNav" ng-click="picturePop({{prevID}});" ng-show="picID > 1">Previous</div>
        <div id="picNav" ng-click="picturePop({{nextID}});" ng-show="picID < picCount">Next</div>
        <img src="images/paintings/{{thisPic.image}}" />
        <p>
        <b>{{thisPic.title}}</b>
        </p>
        <p>{{thisPic.desc}}</p>
        </div>
    </div>

my new function:

    $scope.picturePop = function(picID){
        match = $.grep($scope.gallery, function(obj) { return obj.id == picID; });
        $scope.thisPic = match[0];
        $scope.picID = picID;
        $scope.nextID = picID + 1;
        $scope.prevID = picID - 1;
        var $content =  $('#innerPictureDisplay');
        var scope =  $content.scope();
        $compile($content.contents())(scope);
};

When I click on a pic, it all loads up fine but when I click on a Previous or Next, it closes since it's registering picID as null. I checked and the numbers are indeed getting printed in the code, but angular doesn't see them on the click. They're coming through as undefined - seemingly the compile issue. I tried implementing it all as a directive, even using the suggested link, but I must've done something off since it didn't help.

Reverend Bubbles
  • 1,363
  • 5
  • 15
  • 29
  • Why are you using jQuery for this in the first place? Use angular methodology and let angular build and manage the dom from your data model. Strongly suggest reading :[thinking-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – charlietfl Jan 04 '16 at 19:02
  • You're really pushing the limits of the utility of angular in the first place. Your injected html can easily be placed within the templates and use `ng-show="picID > 1"` (for example) to show or hide your navigation and `ng-src="..."` to show the image itself. – bstockwell Jan 04 '16 at 19:03
  • Like I said below as well, I know this is a bit backward. But I was just throwing this up. I think I will go back and rework this cleaner, though. Thanks! – Reverend Bubbles Jan 04 '16 at 19:06

1 Answers1

0

You can use the angular service $compile like so:

$compile("<a ng-click='myFunction()'>my html</a>")(scope);

And of course you must inject him wherever you are. Anyway, for God sake, don't use DOM manipulation this way. You should use a directive and feed the content from a model instead.

UPDATE 1

I sugest use incuna's bindHtmlCompile directive that you can found here.

lenilsondc
  • 9,590
  • 2
  • 25
  • 40
  • yea, I know this was a bad way to build it. I was just pumping it out fast for proof of concept and was going to go clean it up later. Thanks! – Reverend Bubbles Jan 04 '16 at 19:03
  • Is not about the bad way, but the only way to recompile in angular. – lenilsondc Jan 04 '16 at 19:04
  • You guys are right though. I need to rethink how I'm displaying this in the first place. – Reverend Bubbles Jan 04 '16 at 19:09
  • Updated my answer (Update 1), that guy may help with a very useful directive. – lenilsondc Jan 04 '16 at 19:10
  • Your expression is incorrect you should use `ng-click="picturePop(nextID);"` once `picturePop` and `nextID` are both $scope members. Because ngClick already are an angular directive you don't need to use double mustaches. – lenilsondc Jan 05 '16 at 10:10