How to bind name with object --> param value? AngularJS

Question

I am making app using Twitch api and i am on the stage to represent different streams. I am using in the view and passing stream-name from the $scope.streamName but the stream do not load.

Here is the controller:

app.controller('streamController', function($scope, $http, $location) {
var streamName = $location.path().substring(9).toLowerCase();
$http.jsonp('https://api.twitch.tv/kraken/channels/' + streamName + '?callback=JSON_CALLBACK').
  success(function(data, status, headers, config) {
    $scope.data = data;
    $scope.streamName = data.name;
    console.log(streamName);
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });
});

and passing streamName to "object"

           <object type="application/x-shockwave-flash" height="378" width="620" data="//www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf" bgcolor="#000000">
                <param name="allowFullScreen" value="true" />
                <param name="allowScriptAccess" value="always" />
                <param name="allowNetworking" value="all" />
                <param name="movie" value="//www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf" />
                <param name="flashvars" value="channel={{streamName}}&auto_play=true&start_volume=100" />
            </object>

When i inspect the element in the browser everything is there but the stream window won't load. Any ideas why?

I tried it even without $http request but the result is the same....

This is example of the json i am getting from $http: https://api.twitch.tv/kraken/channels/starladder1

Answer 1

The problem is that the streamName is not ready immediately when the page loads, even if you set it later, the object tag is not gonna change its contents.

You should make a directive for that object tag, pass the streamName as a reference to that directive, and when it changes you add the html of the embed object.

Your main html would look like this:

<twitch-video stream="streamName"></twitch-video>

And your directive would look like this:

app.directive('twitchVideo',[function(){
  return{
    restrict: 'E',
    template: '<div></div>', // your container
    scope: {
      stream: '='
    },
    link: function(scope, element, attrs){
        scope.$watch(attrs.stream, function(value) {
           element.html(''); // clear any content
           if(value){
                element.html('your resulting object tag with the stream name received');
           }
        });
    }
  }
}]);