无法访问 jQuery 插件中的原型函数答案

【问题标题】：Can't access prototype function in jQuery plugin无法访问 jQuery 插件中的原型函数
【发布时间】：2016-03-29 01:55:52
【问题描述】：

我正在尝试创建一个包含多个 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>

在控制器内对应的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);
    }
}

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

【问题讨论】：

在标记下，他们定义了 data-photo-src...
。您是否正确定义/更新 data-photo-src？另外，当您在 $scope.loadImage 中设置图像时，它是否指向正确的图像路径？ $('.valiantContainer').Valiant360('loadPhoto', 'path/to/file.jpg');
是的，所有路径都应该是正确的。我将它们记录在需要它们的地方，看看这是否是我的错误。
很高兴看到您解决了这个问题。编码愉快！
Call methods using jQuery Plugin design pattern的可能重复
您应该将解决方案添加为答案并接受它，以便进入此线程的用户清楚地看到解决方案。

标签： javascript jquery angularjs

【解决方案1】：

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

我做了更多搜索，发现了这个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);
    }
}

【讨论】：