如何使用Angular Js自动运行Colorbox

时间:2015-01-24 20:44:46

标签: javascript jquery angularjs angularjs-directive colorbox

这是我的应用:

Plunker

我的应用程序的一部分:

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);     
}
};  
});

如你所见,我已经尝试设置指令,但我不知道为什么它不起作用...我研究了很多并尝试了不成功的方法......

先谢谢

2 个答案:

答案 0 :(得分:0)

我认为你的plunker无法工作的主要原因是因为你还没有包含所需的js文件。 Angular,jQuery& colorbox和app.js也不见了。

colorbox的指令如下所示:

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

同样this Stackoverflow问题对解决您的问题非常有用。

您可以找到更新的plunker here

代码看起来仍然非常混乱,因为您的代码缩进不正确。请正确使用它,因为它提高了可读性。 无论如何它现在正在工作,并使用AngularJS指令自动打开你的颜色盒。

答案 1 :(得分:-1)

无需亲自实施该指令。

彩盒的免费MIT开源角度指令(和一个服务)可在以下位置获得: https://github.com/igorlino/angular-colorbox 有一些文档和演示示例页面。

它可以用作属性(可选选项)或标记(带选项,也可以绑定colorbox支持的回调)。

使用您的代码,一个代码示例如何使用它

JAVASCRIPT
//inject dependency to the angular-colorbox
var app = angular.module("app", ["ngRoute", "ngAnimate", "colorbox"]);

HTML
<img id="cb_01" src="path_to_image" colorboxable="{opacity:0.5, open: true}">

HTML
<img id="cb_03" src="path_to_image" >
<colorbox box-for="#cb_03"  options="{href:'images/large/image1.jpg', opacity:0.5, open: true, title:'A title' }" />


HTML GALLERY
<img class="gal01" src="path_to_image" >
<img class="gal01" src="path_to_image2" > 
<colorbox box-for=".gal01"  options="{open: true, title:'A colorbox gallery' }" />

免责声明:我是麻省理工学院开源项目的维护者。