How to AutoRun Colorbox with Angular Js

Question

Here is my app:

Plunker

Part of my app:

var app = angular.module("app", ["ngRoute",
"ngAnimate"]);

app.config(function($routeProvider) { 
$routeProvider.

when("/inicio", {

templateUrl: "inicio.html",
  controller: "inicioCtrl",
  animate: "slideLeft"
}).
otherwise({
  redirectTo: "/inicio"
});
});

app.controller("ViewCtrl", function($scope) {

});

app.directive('colorbox', function() {
return {   
restrict: 'AC',    
link: function (scope, element, attrs) {        
  $(element).colorbox(attrs.colorbox);     
}
};  
});

As you see i have tried setting the directive but i dont know why it does not work...I researched a lot and tried unsuccessfully ways to...

thanks in advace

Answer 1

I think the main reason why your plunker is not working is because you haven't included the required js files. Angular, jQuery & colorbox and also app.js was missing.

The directive for the colorbox looks like this:

app.directive('colorbox', function() {
    return {   
        restrict: 'A',    
        link: function (scope, element, attrs) {        
        $(element).colorbox(scope.$eval(attrs.colorbox));     
    }
};

Also this Stackoverflow question was useful to solve your problem.

You can find the updated plunker here.

The code looks still pretty messy, because your code indentations are not correct. Please use it correctly, because it improves readability. Anyway it is working now and auto opens your colorbox with the AngularJS directive.