如何使用 Angular Js 自动运行 Colorbox

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 & colorbox 以及 app.js 都丢失了。

颜色框的指令如下所示：

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

另外 this Whosebug 问题对解决您的问题很有用。

您可以找到更新的 plunker here。

代码看起来还是很乱，因为你的代码缩进不正确。请正确使用它，因为它提高了可读性。不管怎样，它现在可以工作了，并且使用 AngularJS 指令自动打开你的颜色框。

Answer 2

不需要自己实现指令。

有免费的麻省理工学院开源 angular 用于 colorbox 的指令（和一项服务）可在以下位置获得： 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' }" />

免责声明：我是 MIT 开源项目的维护者。

如何使用 Angular Js 自动运行 Colorbox

How to AutoRun Colorbox with Angular Js

javascript

jquery

colorbox

angularjs

angularjs-directive