ngtweet not shown inside ui-view router

[fawwaz]

I am using your library to load a tweet preview inside a partials html file. However the tweet didn't shown up. How to solve this problem ?

[arusahni]

I'll need more information. I've tested ngTweet with the default Angular router, and tweets render just fine inside of partials. You can clone this repository, run gulp serve, and visit http://localhost:3000 to test w/the Angular router.

ui-router shouldn't present an issue, here. Are you sure whatever information you're passing in to the partial is available within the twitter-widget scope?

[fawwaz]

well, i've found the problem, after debugging several hours, it says that the twitter-widget-id value is undefined. Probably because i am pulling a list of twitter ids from my API service and your twitter widget is rendering before it retrieve a list of twitter ids from my server.

Do you have any recomendation so i can use your directive "on the fly".
I've tried several way. I made a function that append twitter-widget directive inside my API callback, it failed to show embedded tweet.

Heres is my controller :

app.controller('HomeController', ['$scope','DBase''$compile',function($scope,DBase,$compile){

        function getUnLabelledData(){
            DBase.getUnlabelledData($scope.active_user,$scope.user_lower_limit, function(response){
                ... 
                $scope.loadTweet();
                ...
            });
        }
        getUnLabelledData(); 

        $scope.loadTweet = function(){
            var current_tweet       = $scope.unlabelled_tweet_ids[$scope.current_tweet].id;
            var divelement          = angular.element(document.querySelector('#twitterpreviewdiv'));
            var appendHtml          = $compile('<twitter-widget twitter-widget-id="\''+current_tweet+'\'"></twitter-widget>')($scope);
            divelement.append(appendHtml);
        }

}]);

and here is my DBase service :

app.service('DBase',['$http','$q',function($http,$q){
    var Dbase={};

    Dbase.getUnlabelledData = function(session,lower_limit,callback){
        $http.get(server_basename+"/api/unlabelled_data",{
            params:{
                session:session,
                lower_limit:lower_limit
            }
        }).then(function(response){
            callback(response);
        });
    }

    return Dbase;
}]);

[arusahni]

Right now the directive is dependent on having the ID available at render time. I might be able to make an update so it allows for dynamic binding sometime in the near future. For now, maybe consider wrapping the twitter-widget inside of ng-if bound to the tweet ID?

I'll tag this as an enhancement and will only close it once I feel that it's addressed by ngTweet.

[fawwaz]

Thanks, it works. The "temporary" solution is wrapping the twitter-widget inside ng-if in my case :

<div ng-if="unlabelled_tweet_ids">
    <twitter-widget twitter-widget-id="unlabelled_tweet_ids[current_tweet].id"></twitter-widget>    
</div>

[fawwaz]

Well, actually it not "perfectly" solve the problem, i pull the tweet ids and try to change the twitter-widget-id value one by one. It only render correclty once but once the tweet id changed it doesn't re-rendered. Do you have any suggestion ?

[arusahni]

In that case, you want to do something to force the ng-if to eval to false and then back to true. e.g.

<div ng-if="unlabelled_tweet_ids && show_tweet">
        <twitter-widget twitter-widget-id="unlabelled_tweet_ids[current_tweet].id"></twitter-widget>    
</div>

And, in your controller, wherever you change the current_tweet, something like:

function changeTweet(newTweet) {
    $scope.show_tweet = false;
    $scope.current_tweet = newTweet;
    $scope.show_tweet = true;
}

Parts of the above snippet may need to be wrapped in an $apply. These are just hacky workarounds, however, until ngTweet can handle changing IDs (it wasn't originally designed for that use-case).

[arusahni]

@fawwaz does the latest version on the develop branch accomplish what you need? You should now be able to change the variable and the widget should update accordingly.

[arusahni]

This has been released as part of 0.6.0.