oEmbed Directive

[ansonphong]

Hi Michel, I devised a way where we could use a directive to do the oEmbed, which would be a clean way to do it.

You could basically have it like this, where o-embed directive with the value of the url being embedded, would basically populate the scope of it's contents with

$scope.oEmbed (the actual embed code) $scope.status (the status: loading / done)

<div o-embed="http://www.youtube.com/watch?v=38peWm76l-U">
{{oEmbed}}
<br>
{{$scope.status}}
</div>

Just like that --- so I've started this directive, and I've been hitting a wall in implementation where even though I've injected pwData service into the directive, I can't get it to actually work. This is strange to me, since I've been implementing the pwData service in other functions quite smoothly. I'm guessing it's an error in my syntax. I just get:

TypeError: Cannot call method 'wp_ajax' of undefined

Can you have a look at this and see why it's not working?

You can find it by searching in app.js for : postworld.directive( 'oEmbed'

[michelhabib]

i can recreate the problem, and checking it now

[michelhabib]

fixed in latest commit. Normally, you would want to make service calls inside controllers, instead of directive's link. So, the usual way to do this is to create a directive and attach a controller to it, like this:-

postworld.directive( 'oEmbed', ['$sce',function($scope, $sce){

    return { 
        //restrict: 'A',
        //scope : function(){
        //},
        //template : '',
        controller: 'pwOEmbedController',
        link : function ($scope, element, attributes){
            // When the oEmbed Value changes, then change the html here
            $scope.$watch('oEmbed', function(value) {
                console.log('test',value);
                element.html(value);
            });          
        }
    };

}]);

Also note the watch expression above, it is watching over the oEmbed value, and uses it to change the html of the element.

and then, put all service calling, scope variable updates, etc... in the controller, like this:-

postworld.controller('pwOEmbedController',
    function pwOEmbedController($scope, $attrs, $sce, pwData) {
            //alert( attributes.oEmbed );
            $scope.status = "loading";
            $scope.oEmbed = "embed code for : " + $attrs.oEmbed;

            var link_url = $attrs.oEmbed;
            var args = { "link_url": link_url };

            // MEDIA GET
            $scope.oEmbedGet = function(){
                pwData.wp_ajax('ajax_oembed_get', args ).then(
                    // Success
                    function(response) {    
                        $scope.status = "done";
                        console.log('return',response.data);
                        $scope.oEmbed = response.data; // $sce.trustAsHtml( response.data );                        
                    },
                    // Failure
                    function(response) {
                        $scope.status = "error";
                    }
                );
            };
            $scope.oEmbedGet();
});

and then make the call from html, like this:

<div o-embed="http://www.youtube.com/watch?v=38peWm76l-U">
<br>
{{$scope.status}}
</div>

you can find the example here: http://localhost/wordpress/search/#/o-embed/

i guess if we stress hard we can find a way to make the service call from inside the directive, i didn't try to, i just thought i should show you the usual structure, which should help you better design the rest of the directive.

[michelhabib]

do you want to remove the ng-bind as well? i guess you do, let me check one more thing and get back.

[michelhabib]

sorry, i udpated the comment above in case you read it before - i did that after removing ng-bind totally, and making the insertion of the html dynamic inside the link function of the directive. you may watch it on the latest commit http://localhost/wordpress/search/#/o-embed/

[ansonphong]

Ok great - that's the structural advice I was looking for. Thanks!

On Wednesday, October 30, 2013, michelhabib wrote:

sorry, i udpated the comment above in case you read it before - i did that after removing ng-bind totally, and making the insertion of the html dynamic inside the link function of the directive. you may watch it on the latest commit http://localhost/wordpress/search/#/o-embed/

— Reply to this email directly or view it on GitHubhttps://github.com/phongmedia/postworld/issues/62#issuecomment-27415680 .

[michelhabib]

Sure, keep them coming:)