Question

这是我的应用：

我的应用程序的一部分：

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

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

先谢谢

Answer 1

我认为你的plunker无法工作的主要原因是因为你还没有包含所需的js文件。 Angular，jQuery＆amp; 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指令自动打开你的颜色盒。

Answer 2

无需亲自实施该指令。

彩盒的免费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' }" />

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

如何使用Angular Js自动运行Colorbox

2 个答案: