这是我的应用:
我的应用程序的一部分:
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);
}
};
});
如你所见,我已经尝试设置指令,但我不知道为什么它不起作用...我研究了很多并尝试了不成功的方法......
先谢谢
答案 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' }" />
免责声明:我是麻省理工学院开源项目的维护者。