В моем проекте определены три состояния: "/ 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);
Функция из проектов * Контроллер 1015 *: (Эта функция привязывает данные к модальному блоку)
$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 Спасибо за вашу помощь.