Colorbox and Angularjs

[stargate]

Has anybody tried using the jQuery ColorBox plugin. The interesting
thing I found is that when you try to include a Outside HTML (AJAX)
Overlay with angular code in it, it doesn't work.

http://colorpowered.com/colorbox/core/example5/index.html

Take a look at other content Types and you will see outside HTML
AJAX.

[Igor Minar]

Please create a jsfiddle that reproduces the issue.

/i

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[stargate]

I tried to create a jsfiddle example but the overlay wouldn't work for
some reason in the output. Plus jsfiddle wouldn't work if you are
loading a external file using the Ajax load in colorbox. Unless there
is a way around it

[Aaron Smith]

Hey guys, 

I came across this problem today and came up with a solution.

If you create a directive in angular that creates a colorbox, you can effectively intercept the html before it gets displayed in the colorbox and run it through $compile(data)(scope) before sending it to the colorbox as the html attribute. You can even use functions, as long as you create them first in a registeredCallbacks object. Here's my code: (no jsfiddle because it doesn't play well with colorbox)

.directive('ifmcolorbox', function($http, $compile, $parse) {

    return {

      restrict: 'A',

      link : function postLink(scope, element, attributes, ngModel) {

        element.on("click", function(e) {

            e.preventDefault();

            $http.get(attributes.href).success(function(data) {

                $.colorbox({

                    html : $compile(data)(scope),

                    transition : attributes.transition || "elastic",

                    speed : parseInt(attributes.speed || 350),

                    title : attributes.title || false,

                    scrolling : (attributes.scrolling ? /^true$/i.test(attributes.Scrolling) : true),

                    opacity : parseFloat(attributes.opacity || 0.85),

                    escKey : (attributes.escKey ? /^true$/i.test(attributes.EscKey) : true),

                    width : attributes.width || false,

                    height : attributes.height || false,

                    innerWidth : attributes.innerWidth || false,

                    innerHeight : attributes.innerHeight || false,

                    initialWidth : attributes.initialWidth || 300,

                    initialHeight : attributes.initialHeight || 100,

                    maxWidth : attributes.maxWidth || false,

                    maxHeight : attributes.maxHeight || false,

                    fixed : attributes.fixed || false,

                    top : attributes.top || false,

                    bottom : attributes.bottom || false,

                    left : attributes.left || false,

                    right : attributes.right || false,

                    onOpen : (attributes.onOpen ? (scope.registeredCallbacks && scope.registeredCallbacks.hasOwnProperty(attributes.onOpen) ? scope.registeredCallbacks[attributes.onOpen]() : false) : false),

                    onLoad : (attributes.onLoad ? (scope.registeredCallbacks && scope.registeredCallbacks.hasOwnProperty(attributes.onLoad) ? scope.registeredCallbacks[attributes.onLoad]() : false) : false),

                    onComplete : (attributes.onComplete ? (scope.registeredCallbacks && scope.registeredCallbacks.hasOwnProperty(attributes.onComplete) ? scope.registeredCallbacks[attributes.onComplete]() : false) : false),

                    onCleanup : (attributes.onCleanup ? (scope.registeredCallbacks && scope.registeredCallbacks.hasOwnProperty(attributes.onCleanup) ? scope.registeredCallbacks[attributes.onCleanup]() : false) : false),

                    onClosed : (attributes.onClosed ? (scope.registeredCallbacks && scope.registeredCallbacks.hasOwnProperty(attributes.onClosed) ? scope.registeredCallbacks[attributes.onClosed]() : false) : false)

                })

            });

        });

      }

    }

  })