Dynamic content from scope not loading for meta tags

[deanjohnr]

I am trying to load dynamic content into the meta tags for facebook share button. The state loads with the tags transported to the head, but the dynamic content is blank. My tags look similar to the below.

<meta view-head property="og:url"             content="{{share.url}}" /> 
<meta view-head property="og:title"           content="{{share.title}}" /> 
<meta view-head property="og:image"           content="{{share.image}}" /> 
<meta view-head property="og:description"     content="{{share.desc}}" />
<meta view-head property="og:image:height"    content="{{share.imgh}}" />
<meta view-head property="og:image:width"     content="{{share.imgw}}" />

[apparentlymart]

Can you share the relevant parts of the code that is populating the scope for this template? It's hard to guess what's going on here from the template alone.

[deanjohnr]

I created an alternate solution using an $emit/$on pairing in the child/parent controllers, but it has its weaknesses. I really like the cleanliness of viewhead, but I am also not sure how to implement viewhead and window.prerenderReady together. Right now I just need to solve the viewhead issue.

Below is my $scope generation. I know it is populating the $scope.share object correctly.

        $scope.share = {};

        var desclen = $scope.listing.desc.length;
        var desccut = "";
        if (desclen < 141) {
            desccut = $scope.listing.desc;
        } else {
            desccut = $scope.listing.desc.substr(0, 140) + "...";
        };

        $scope.share.title = $scope.listing.beds + " bed, " + $scope.listing.baths + "bath for $" + $scope.listing.rent + "/month";
        $scope.share.desc = "Located at " + $scope.listing.address + " and available starting " + $scope.listing.dt + ". " + desccut;
        $scope.share.url = "http://mydomain.com/#!/listing/" + $scope.listing.listingid;
        $scope.share.image = $scope.picUrls[0];

        $("<img/>").attr("src", $scope.picUrls[0]).load(function(){
            s = {w:this.width, h:this.height};
            $scope.share.imgw = s.w
            $scope.share.imgh = s.h;
        });

[apparentlymart]

It's not immediately obvious to me what's going on here. It looks like it should be working.

Could you try calling scope() on one of those meta elements and see if you get back the scope you're expecting, or if the data you are looking for is in a parent scope?

Here's one way to do that:

e = angular.element(document.querySelector("meta[view-head]"));
console.log(e.scope());

If you're in a browser that shows objects as an expandable tree, you should be able to see in there what properties are on the scope object, and then expand out the $parent property to see what's on the parent scope, etc. I'd try navigating up through all the parents until you get to the top, and see if you see your "share" property anywhere in there. If not, the tree might give you a clue as to what scope is actually being used, based on your knowledge of your app.

The result of this experiment will hopefully help me understand better what is going on here.