У меня есть страница с несколькими почтовыми ящиками, у каждого из которых есть своя структура папок, и один поиск, который должен искать в выбранном почтовом ящике и папке и фильтровать отображаемые сообщения на основе предоставленных пользователем ключевых слов.
Пример:
├── Mailbox 1
| ├── Folder 1
| └── Folder 2
| └── Folder 3
|
├── Mailbox 2
| ├── Folder 1
| └── Folder 2
| └── Folder 3
|
├── Mailbox 3
| ├── Folder 1
| └── Folder 2
| └── Folder 3
Если бы пользователь выбрал Почтовый ящик 3> Папка 2, все содержимое Папки 2 было бы видно.Затем они могут нажать «Поиск» и отфильтровать содержимое папки 2 по ключевым словам поиска.
Кнопка поиска открывает модал, который содержит форму.Когда форма отправлена, модальное окно закрывается, и результаты на странице фильтруются и отображаются соответственно.
Когда кнопка находится в теле моей страницы, все работает как положено.Когда кнопка помещается в навигационную панель, выбранные почтовый ящик и папка (в логике внутреннего интерфейса) сбрасываются в почтовый ящик 1 без выбора папки, и функция поиска не работает.Сброс происходит по нажатию кнопки поиска, перед отправкой формы.Как только модал открывается, он ищет mailbox id: 1, folder id: 0, и нет папки с id = 0.
Я предполагаю, что есть проблема с областью действия, но я не уверен, как ее решить.Код ниже.
Угловой 1.6, Bootstrap 4.1
app.ts:
var app = angular.module('app', ['ngRoute', ... ]);
...
app.controller('HomeController', homeController, ['FileSaver', 'Blob']);
...
app.config(
function ($routeProvider, ...) {
$routeProvider.
when('/', {
redirectTo: '/Home'
}).
when('/Home', {
templateUrl: 'spa/views/home.html',
controller: 'HomeController'
}).
});
Navbar (Index.html):
<body ng-app="app">
<div ng-controller="HomeController">
<div>
<nav class="navbar">
...
<div class="navbar-nav">
<div class="nav-item">
<button ng-click="onSearchClick()">
<span>SEARCH</span>
</button>
</div>
</div>
...
</nav>
</div>
</div> <!-- end HomeController -->
<div ng-view>
<!-- page content here -->
</div>
</body>
Тело (home.html):
<div class="container-fluid">
<!-- THIS CODE WORKS. THE FUNCTION FIRES AS EXPECTED. -->
<button ng-click="onSearchClick()">
<span>SEARCH</span>
</button>
...
</div>
Контроллер (HomeController.ts):
var homeController = function ($scope, ...) {
var vm = new HomeViewModel();
$scope.vm = vm;
...
$scope.onSearchClick = function () {
var modalInstance = $uibModal.open({
templateUrl: 'spa/views/search.html',
controller: 'SearchController',
size: 'lg',
scope: $scope
});
modalInstance.result.then(function (modalScope) {
vm.areResultsFromSearch = true;
vm.currentMessagePage = 1;
getMessagesByPage();
}).catch(() => { });
},
function (error) {
vm.error = error.statusText;
}
}
function getMessagesByPage() {
// This function calls a service and then
// calls another function which finally displays results.
// Much of this also depends on the HomeViewModel.
// I don't believe any of this code is relevant here because,
// as I said, the code itself all works when the element
// is placed in home.html instead of index.html.
// You can see why it would be difficult to, say,
// turn this whole thing into it's own service and then use
// a Header Controller separate from a Home Controller.
// It would be major surgery on the whole application.
}
}