Question

在我的项目中定义了三个状态，分别为“ / projects”，“ / pages”和“ / settings”。下面给出的功能可以正常运行，在不更改状态的情况下（我也尝试了ngRoute，但结果相同）。但是，当我开始更改状态然后返回同一页面时，此函数未将数据绑定到模式框。 [在这种情况下没有发生错误！] （当我刷新页面时，它恢复为正常）。

我的 app.js 文件

// Dependencies wired beforehand.
/** @var {Object} projects Page management page state */
var projects = {
    name: 'projects',
    url: '/projects',
    templateUrl: TEMPLATES_DIR + 'projects.html',
    controller: 'projects'
};   

/** @var {Object} pages Page management page state */
var pages = {
    name: 'pages',
    url: '/pages',
    templateUrl: TEMPLATES_DIR + 'pages.html',
    controller: 'pages'
};

/** @var {Object} settings Settings page state */
var settings = {
    name: 'settings',
    url: '/settings',
    templateUrl: TEMPLATES_DIR + 'settings.html',
    controller: 'settings'
};

$stateProvider.state(projects);
$stateProvider.state(pages);
$stateProvider.state(settings);

来自 projects 控制器的功能：（此功能将数据绑定到模式框）

$scope.getProjectImages = function(id) {
    $scope.projectId = id;

    projectsFactory.getImages(id).then(function(response) {
        $scope.images = response.data;
        //I can see that it's holding array but it's not binding data to modal box anymore when the state changed
        alert($scope.images); 

    });
};

模板文件（已更新）：

<div id="project-image-manager" class="uk-modal-container uk-position-z-index" uk-modal="stack: true; bg-close: false; container: false">
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default" type="button" ng-click="resetProjectImagesModal()" uk-close></button>
        <div class="uk-grid-divider" uk-grid>
            <div class="uk-animation-slide-bottom-medium uk-width-1-3@m uk-margin-medium-top">
                <h3>Image Attachment<span class="uk-display-block uk-text-small">File Management</span></h3>
                <form method="post" enctype="multipart/form-data">
                    <button ngf-select="uploadImage($files)" class="uk-button uk-margin-bottom uk-button-default uk-text-capitalize uk-text-left" accept="image/*" multiple>Upload Images<span class="uk-icon uk-margin-small-left" uk-icon="icon: image"></span></button>
                </form>
                <p>{{ errorMsg }}</p>
                <progress class="uk-progress" value="{{ progress }}" max="100"></progress>
                <ul class="uk-list uk-text-small uk-margin-large-top uk-list-divider">
                    <li ng-repeat="file in files">{{ file.name }}</li>
                </ul>
            </div>
            <div class="uk-width-expand@m">
                <div class="uk-background-default uk-padding-bottom uk-width-expand uk-text-center" ng-if="images.length">
                    <p class="uk-animation-slide-left-small" ng-if="sortableImages.disabled">
                        <span class="uk-icon uk-margin-small-right" uk-icon="icon: lock"></span><a class="uk-text-muted uk-link-reset" ng-click="sortableImages.disabled = false">Unlock to sort images</a>
                    </p>
                    <p class="uk-animation-slide-left-small" ng-if="!sortableImages.disabled">
                        <span class="uk-icon uk-margin-small-right" uk-icon="icon: unlock"></span><a class="uk-text-muted uk-link-reset" ng-click="sortableImages.disabled = true">Lock sorting</a>
                    </p>
                </div>
                <h3 class="uk-animation-fade uk-text-center uk-text-muted uk-margin-large-top uk-align-center" ng-show="!images.length">
                    <span class="uk-icon uk-display-block" uk-icon="icon: image; ratio: 4"></span>This project has no images.
                </h3>
                <div ng-if="images.length">
                    <ul class="uk-animation-fade uk-list uk-margin-medium-top" ng-model="images" ui-sortable="sortableImages">
                        <li class="uk-margin-medium-bottom" ng-model="images" ng-repeat="image in images">
                            <div uk-grid>
                                <div class="uk-width-1-2@m uk-width-1-3@s mobile-width-image sortable-image-item">
                                    <div class="uk-background-cover uk-width-1-4@xs uk-panel uk-flex uk-flex-center uk-flex-middle image-thumbnail-height" style="background-image: url({{ uploadPath }}{{ image.url }});">
                                    </div>
                                </div>
                                <div class="uk-width-1-2@m uk-width-2-3@s mobile-width-text">
                                    <p class="uk-text-muted" ng-if="!image.description.length">No description given.</p>
                                    <p>{{ image.description }}</p>
                                    <hr class="uk-divider-small uk-margin-top uk-margin-bottom">
                                    <ul class="uk-iconnav uk-padding-remove-left">
                                        <li>
                                            <a ng-click="getImageDescription(image.id)" uk-icon="icon: file-edit" uk-toggle="target: #add-description"></a>
                                        </li>
                                        <li>
                                            <a ng-click="removeImage(image)" uk-icon="icon: trash"></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

该代码有什么问题？我的最后一个计划是放弃在SPA中进行的工作，并选择传统的路由。：D感谢您的帮助。

Answer 1

我解决了。模态框的DOM附加容器选项可防止数据绑定。 这是与UIkit CSS框架相关的问题。

解决方案：将容器选项设置为false。

这是解决方案：

uk-modal="...other options.. container: false">

UIkit js参考：

container   String  true    Define a target container via a selector to specify where the modal should be appended in the DOM. Setting it to false will prevent this behavior.

angularjs ng模型在状态更改后未绑定

1 个答案: