Question

你好，我的ASP MVC应用程序中有这样的指令+ Kendo上传（没关系）

<div ng-repeat="dp in dealerphotos" class="imgbox">
    <div ng-if="dp.DealerPhotoId != 0">
        <div class="img-wrapper">
            <a data-lightbox="{{ dp.DealerId }}{{ dp.PhotoId }}{{ dp.FileName }}" data-title="{{ dp.FileName }}" href="~/Upload/{{ dp.DealerId }}/{{ dp.PhotoId }}/{{ dp.FileName }}">
                <img ng-src="~/Image/Resized?size={{ resize }}&dealerId={{ dp.DealerId }}&photoId={{ dp.PhotoId }}&fileName={{ dp.FileName }}" alt="" class="uploaded" center-preview />
            </a>
        </div>
        <div class="btnblock">
            <button ng-click="changePhoto(dp.DealerPhotoId, dp.PhotoId, $index)" title="@Resources.Strings.ButtonChange"><span class="icon pencil"></span></button>
            <button ng-click="removePhoto(dp.DealerPhotoId)" title="@Resources.Strings.ButtonRemove"><span class="icon trash"></span></button>
        </div>
    </div>

    <div ng-show="dp.DealerPhotoId == 0" ng-attr-class="{{ (dp.IsFirstMandatory || dp.IsFirstMandatoryIfInstalled) ? 'mandatory' : '' }}">
        <input name="files"
               type="file"
               kendo-upload
               k-multiple="false"
               k-async="{ saveUrl: '/Steps/Save', autoUpload: true }"
               k-select="onSelect"
               k-error="onError"
               k-success="onSuccess"
               k-upload="onUpload"
               title="@Resources.Strings.ButtonAdd" />

        <div class="mandatory-marker">
            <p ng-if="dp.IsFirstMandatory">@Resources.Strings.StepMandatory</p>
            <p ng-if="!dp.IsFirstMandatory && dp.IsFirstMandatoryIfInstalled" class="installed">@Resources.Strings.StepMandatoryIfInstalled</p>
        </div>
    </div>
</div>

使用.js代码：

//IFFE
(function () {
    var app = angular.module("app");

    app.directive('tripleUploadDirective', ['$http', function () {

        var controller = [
            '$scope', '$http', function ($scope, $http) {

                $scope.dealerPhotoId = null;

                $scope.removePhoto = function (id) {
                    swal({
                        title: "", text: localization.StepRemoveConfirm, type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: localization.AlertYesRemove,
                        closeOnConfirm: true,
                        animation: "slide-from-top"
                    }, function () {
                        $http.post("/Steps/Remove", { dealerPhotoId: id }).then(function (data) {
                            for (var i = 0; i < data.data.length; i++) {
                                if (i == 0 && data.data[i].DealerPhotoId == 0) {
                                    if ($scope.mandatory)
                                        data.data[i].IsFirstMandatory = true;
                                    if ($scope.mandatoryifinstalled)
                                        data.data[i].IsFirstMandatoryIfInstalled = true;
                                }
                            }
                            $scope.dealerphotos = data.data;

                        });

                    });
                };

                $scope.changePhoto = function (dealerPhotoId, id, index) {
                    swal({
                        title: "", text: localization.StepChangeConfirm, type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: localization.AlertYesChange,
                        closeOnConfirm: true,
                        animation: "slide-from-top"
                    }, function () {
                        $scope.dealerPhotoId = dealerPhotoId;
                        var uploadinput = angular.element("#div_" + id + " input[name=files]")[index];
                        angular.element(uploadinput).click();
                    });

                };

                $scope.onSelect = function (e) {
                    $.each(e.files, function (index, value) {
                        var ok = value.extension.toLowerCase() == ".jpg" || value.extension == ".jpeg";

                        if (!ok) {
                            e.preventDefault();
                            swal({ title: "", text: localization.StepValidateExtension, type: "error", confirmButtonText: localization.AlertOK, animation: "slide-from-top" });
                        }
                    });
                };

                $scope.onError = function (e) {
                    swal({ title: "", text: e.XMLHttpRequest.response, type: "error", confirmButtonText: localization.AlertOK, animation: "slide-from-top" });
                    $scope.$apply();
                };


                $scope.onSuccess = function (e) {
                    if (e.response != null) {
                        for (var i = 0; i < e.response.length; i++) {
                            if (i == 0 && e.response[i].DealerPhotoId == 0) {
                                if ($scope.mandatory)
                                    e.response[i].IsFirstMandatory = true;
                                if ($scope.mandatoryifinstalled)
                                    e.response[i].IsFirstMandatoryIfInstalled = true;
                            }
                        }
                        $scope.dealerphotos = e.response;
                        $scope.$apply();

                    }
                };

                $scope.onUpload = function (e) {
                    e.data = { photoId: $scope.photoid, dealerPhotoId: $scope.dealerPhotoId };
                    $scope.dealerPhotoId = null;
                };
            }];

        return {
            restrict: 'EAC',
            scope: {
                dealerphotos: '=dealerphotos',
                photoid: '=photoid',
                mandatory: '=mandatory',
                mandatoryifinstalled: '=mandatoryifinstalled',
                resize: '=resize'
            },
            replace: true,
            templateUrl: '/Directives/TripleUpload',
            controller: controller
            };

    }]);

})();

该指令用于ng-repeat：

   <div ng-repeat="step in matrixCtrl.allSteps" class="m-step">
            <div class="step-title">{{step.stepIndex}}&nbsp;|&nbsp;<a href="/#/step/{{step.PhotoId}}" title="{{ step.Name }}">{{ step.Name }}</a></div>
            <div triple-upload-directive dealerphotos="step.dealerPhotos" photoid="step.PhotoId" resize="170" mandatory="step.IsMandatory" mandatoryifinstalled="step.IsMandatoryIfInstalled" class="img-uploder {{ step.IsMandatory ? 'mandatory' : '' }}"></div>
        </div>

我在$ block.get的成功（）回调中设置了matrixCtrl中的allSteps。

我的问题是ng-repeat的非常奇怪的行为..有时（非常随机），我的DOM没有正确生成。（所有指令仅在最后的ng-repeat迭代中呈现），在其他迭代中只有标题。渲染图像不正确：

ng-repeat中的Angular指令生成随机不正确的DOM

0 个答案: