>我有一个包含多个邮箱的页面,每个邮箱都有自己的文件夹结构,并且单个搜索应该搜索选定的邮箱和文件夹,并根据用户提交的关键字过滤显示的邮件。
例:
├── 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,引导 4.1
应用:
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'
}).
});
导航栏(索引.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>
身体(家.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.
}
}
我刚刚找到了一个解决方案 - reddit 上的某人不久前向我提到了一个差异问题,我完全忘记了它!
我将我的 onClick 函数更改为:
$rootScope.onSearchClick = function () { ... }
瞧!