AngularJS - <button> 具有ng-click功能在正文中工作,但导航栏不工作



>我有一个包含多个邮箱的页面,每个邮箱都有自己的文件夹结构,并且单个搜索应该搜索选定的邮箱和文件夹,并根据用户提交的关键字过滤显示的邮件。

例:

├── 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 () { ... }

瞧!

相关内容

最新更新