Question

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

通过Angular的启动工作非常好，但现在我正处于我想要实现多个图像的位置，它只是不起作用。

没有错误，没有日志，没有。

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

在html-template中：

<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>

在相应的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);
    }
}

我操纵原始插件js以获取日志，现在的功能如下所示：

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

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

编辑：我做了一些搜索，发现了https://stackoverflow.com/a/14128485/5708297

我的功能现在看起来像这样，我从插件中的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);
    }
}

基本上问题已经解决了:)

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

0 个答案: