无法在jQuery插件中访问原型函数

xze*_*rzx 10 javascript jquery angularjs

我正在尝试创建一个由多个360度图像组成的图库.我想使用Valiant360,因为它似乎完成了我需要做的所有事情.

通过Angular的启动工作非常好,但现在我正处于我想要实现多个图像的地步,它只是不起作用.

没有错误,没有日志,没有.

所以这是我的代码......

在html模板中:

<ul class="view__content--imageList">
    <li class="view__content--listItem" ng-repeat="image in laden.images" ng-click="loadImage($index)">
        <p class="view__content--description">{{image.description}}</p>
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

在相应的js内的控制器中:

var container = $('.valiantPhoto');

laden.success(function (data)
{
    $scope.laden = data;
    console.log(data);

    $timeout(function ()
    {
        container.Valiant360({
            hideControls: false,
            fov: 35,
            fovMin: 35,
            fovMax: 35,
            clickAndDrag: true
        });
    });
});

$scope.loadImage = function (id)
{

    var image = $scope.laden.images[id].image;
    var mimage = $scope.laden.images[id].mimage;

    if ($('.view__content--360gallery').height() > 300)
    {
        container.Valiant360('loadPhoto', image);
    } else {
        container.Valiant360('loadPhoto', mimage);
    }
}
Run Code Online (Sandbox Code Playgroud)

我操纵原始插件js有日志,那里的功能现在看起来像这样:

loadPhoto: function(photoFile) {
    console.log("Loading...");
    this._texture = THREE.ImageUtils.loadTexture( photoFile );
    console.log("Loaded: ", photoFile);
};
Run Code Online (Sandbox Code Playgroud)

我已经花了半天时间试图解决这个问题,但我没有看到它.显然,我不是唯一一个有这个问题的人,你可以在这里看到:https://github.com/flimshaw/Valiant360/issues/29但我没有使用jQuery插件的经验,除了使用工作.所以这可能是一个非常明显的错误,但是,如果有人能够把我推向正确的方向,我将非常感激......


编辑:我做了一些搜索,发现这个/sf/answers/988993981/

我的功能现在看起来像这样,我从插件中的loadPhoto获取日志:

$scope.loadImage = function (id)
{
    console.log("Container Height: ", $('.view__content--360gallery').height());

    var image = $scope.laden.images[id].image;
    var mimage = $scope.laden.images[id].mimage;
    var temp = container.Valiant360().data('plugin_Valiant360');

    if ($('.view__content--360gallery').height() > 300)
    {
        temp.loadPhoto(image);
    } else {
        temp.loadPhoto(mimage);
    }
}
Run Code Online (Sandbox Code Playgroud)

所以基本上问题解决了:)

kia*_*ian 1

刚刚回答了基于作者解决方案的问题:


我做了更多搜索,发现了这个/sf/answers/988993981/

我的函数现在看起来像这样,我从插件中的 loadPhoto 获取日志:

$scope.loadImage = function (id)
{
    console.log("Container Height: ", $('.view__content--360gallery').height());

    var image = $scope.laden.images[id].image;
    var mimage = $scope.laden.images[id].mimage;
    var temp = container.Valiant360().data('plugin_Valiant360');

    if ($('.view__content--360gallery').height() > 300)
    {
        temp.loadPhoto(image);
    } else {
        temp.loadPhoto(mimage);
    }
}
Run Code Online (Sandbox Code Playgroud)