javascript - 如何使 jquery 插件与 angularJS 一起运行

Question

尝试使用超时功能，但在 Chrome 或 Safari 中仍然无法工作，而在 Firefox 中却可以工作。

function myFunction() {
            setTimeout(function(){
                callbak();
                alert($(".gallery li a").attr("data-target"));

            }, 3000);
        };
        myFunction();

        callbak = function(){

            $("area[rel^='prettyPhoto']").prettyPhoto();

            $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: false});
            $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});

            $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
                custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
                changepicturecallback: function(){ initialize(); }
            });

            $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
                custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
                changepicturecallback: function(){ _bsap.exec(); }
            });
        };

这是我的代码

<div class="frame">
    <ul class="gallery clearfix">
        <li ng-repeat="imgname in imgsrc" >
            <a data-target="{{imgname.item}}" target="_blank" rel="prettyPhoto[gallery1]" title="You can add caption to pictures. You can add caption to pictures. You can add caption to pictures.">
                <img ng-src="{{ imgname.item }}"/>
            </a>
        </li>
    </ul>

我正在使用this我们门户中的插件，其中 ng-src 路径未加载

Answer 1

AngularJS 无法处理 PrettyPhoto 插件生成的动态生成的内容，因为 Angular 需要编译 html 并设置必要的监视。您需要将 jquery 函数包装到指令中并手动更新作用域元素，如下所示:

var app = angular.module('myApp', ['Authentication', 'ngRoute', 'ngResource', 'ngCookies']);
app.directive("userProfile", ['$scope', '$http', '$location', '$resource', 'fullname', '$timeout', function ($scope, $http, $location, $resource, fullname, $timeout) {

            return {
                scope: {
                    trigger: '@focusMe'
                },
                link: function (scope, element, attrs) {

                    scope.imgsrc = [
                        {
                            item: 'images/profile-pic.jpg'
                        },
                    ];

                    function myFunction() {
                        $timeout(function () {
                            callbak();
                            var result = $(".gallery li a").attr("data-target");
                            console.log(result);
                            //scope.$apply(); - unmark if needed
                        }, 100);
                    }

                    function callback() {
                        $("area[rel^='prettyPhoto']").prettyPhoto();

                        $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({
                            animation_speed: 'normal',
                            theme: 'light_square',
                            slideshow: 3000,
                            autoplay_slideshow: false
                        });
                        $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({
                            animation_speed: 'fast',
                            slideshow: 10000,
                            hideflash: true
                        });

                        $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
                            custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
                            changepicturecallback: function () {
                                initialize();
                            }
                        });

                        $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
                            custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
                            changepicturecallback: function () {
                                _bsap.exec();
                            }
                        });
                    }

                    myFunction();

                }};
}]);