1

问题

我正在尝试将 Adob​​e Creative SDK 集成到我的 Angular 应用程序中。通过单击按钮从照片查看器模式初始化编辑器，这会触发以下功能。初始化编辑器后，onReady回调将隐藏照片查看器元素，并将编辑器附加到模态框。这部分效果很好。

在我的模态 DOM 中，我尝试使用我希望显示或隐藏的元素ng-show="editorOpen"，ng-show="!editorOpen"具体取决于编辑器是否打开。我第一次触发$scope.editPhoto时，ng-show按预期工作。但是，当我关闭编辑器时，ng-show无法更新 DOM。编辑器消失，但隐藏的照片查看器元素仍然隐藏。

我不是 Angular 的摘要周期专家，但从我的研究中发现，我认为问题是在摘要周期中调用了hidePreview()and函数，导致没有将更改注册到.showPreview()ng-show$scope.editorOpen

一旦我关闭编辑器并且ng-show无法更新 DOM，我仍然可以通过在应用程序中执行另一个触发摘要循环的操作来手动触发它，例如使用左/右箭头键尝试导航到下一张照片查看器模式。

不过从这里开始变得更奇怪了。一旦我关闭了编辑器并手动触发了摘要，一切似乎都很正常。如果我第二次重新打开编辑器ng-show，即使我尝试使用刚才描述的方法手动触发摘要，也会完全停止工作。

我尝试过的解决方案

我尝试了许多可能的修复方法，包括本讨论中提供的解决问题的所有解决方案，但都失败了。

  1. 我尝试包装$scope.editorOpen = true并$scope.editorOpen = false在一个$timeout函数中，因为这应该触发一个摘要。我尝试将延迟设置为 0 毫秒和 10 毫秒。两者都失败了。
  2. 我创建了一个作用域函数$scope.toggleEditor来切换$scope.editorOpen并将其传递到 Adob​​e Creative SDK 图像编辑器的onSave、onReady和onClose回调中，而不是下面代码中的showPreview()和hidePreview()函数。那也失败了。
  3. 我尝试将我的整个$scope.editPhoto函数包装在一个$timeout函数中。也失败了。
  4. 我尝试了更直接的手动调用$scope.$apply()方法以及$scope.$digest()在我的showPreview()和hidePreview()函数中。这通常在引发$rootScope:inprog错误之前只工作一次，而且闻起来像是不好的做法。
  5. 最后，变得更加绝望，我尝试if (!$scope.$$phase) $scope.$apply()了，只是想看看它是否能解决问题，尽管这是一种糟糕的做法。不出所料，它也像#4 一样失败了。

编码

在我的控制器中，我具有以下功能：

$scope.editPhoto = function(img, key, currentIndex) {
    var index = currentIndex;
    var photo = img;
    var apiKey = key;
    var ImgID = angular.element('#image-' + photo.id).children().first();
    var ImgSrc = ImgID.attr('src');
    if(!$scope.featherEditor) {
        $scope.featherEditor = new Aviary.Feather({
            apiKey: angular.element('#view_photo').attr('key'),
            appendTo: angular.element('#view_photo'),
            enableCORS: true,
            displayImageSize: true,
            showWaitIndicator: true,
            onLoad: function() {
                launchEditor(ImgID, ImgSrc);
            },
            onReady: hidePreview(),
            onSave: function(imageID, newURL) {
                angular.element(photo).css('background-image','url("' + newURL + '")');
                $http.put('/photos/' + photo.id + '.json',{image: newURL}).then(function(resp){
                    $scope.results[index] = resp.data.photo;
                    photosAPI.resizeColumns();
                    $scope.featherEditor.close();
                });
            },
            onClose: function(isDirty) {
                showPreview();
            },
            onError: function(errorObj) {
                alert('Oops! There seems to have been a problem with the Image Editor! Please let us know if the issue persists!');
                console.log('APIErrorCode: ' + errorObj.code);
                console.log('APIErrorMessage: ' + errorObj.message);
                console.log('APIErrorArgs: ' + errorObj.args);
                showPreview();
            }
        });
    } else {
        $scope.featherEditor.launch({
            image: ImgID,
            url: ImgSrc
        });
    }

    function launchEditor(id, src) {
        $scope.featherEditor.launch({
            image: id,
            url: src
        });
        return false;
    };

    function showPreview() {
        $scope.editorOpen = false;
        angular.element('#close').show()
    };

    function hidePreview() {
        $scope.editorOpen = true;
        angular.element('#close').hide()
    };
};

在我看来，我有以下 div，它存在于模式中：

<div id="view_photo">
    <div ng-show="!editorOpen">
        <div class="photo-preview" id="{{'image-' + results[currentIndex].id}}" ng-style="{'background-image': 'url(' + results[currentIndex].original_image_url + ')'}"></div>
        <div class="photo-controls">
            <div class="btn btn-default pull-left" style="margin-right:5px;" ng-click="editPhoto(results[currentIndex], '<%= ENV['ADOBE_CLIENT_ID'] %>', currentIndex)">
                <i class="fa fa-magic"></i> Edit
            </div>
        </div>
    </div>
</div>
4

0 回答 0