我正在使用ng-switch在我的Web应用程序上的两个功能之间切换，下载和上传(由两个按钮控制(。当用户想要下载时，我使用文本框和提交按钮将搜索查询传递给我的 js 文件中的 $http POST 请求。
这是 HTML 代码：
<button class="btn" name="search" ng-click="name = 'download'">Search & Download</button>
<button class="btn" name="upload" ng-click="name = 'upload'">Upload & Index</button>
<div ng-switch="name">
<div ng-switch-when="download">
<input type="text" ng-model="docsterm" my-enter="postData()" placeholder="Search">
<br><br>
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" heading={{result._source.filename}} ng-repeat="result in results.data.hits.hits">
<span ng-bind-html="highlight(result._source.attachment.content, docsterm)"></span>
<br><br>
<button class="btn">Preview</button>
<!-- Create the download button -->
<a href=""><button class="btn" ng-click="download(result._source.data, result._source.filename, result._source.attachment.content_type)"><i class="fa fa-download"></i></a>
<!-- <textarea id="textbox">Type something here</textarea> <button id="create">Create file</button> <a download="info.txt" id="downloadlink" style="display: none">Download</a> -->
<br>
<!--
<ul uib-pagination boundary-links="true" total-items="results['hits']['total']" ng-model="currentPage" items-per-page="5" class="pagination-sm" previous-text="‹" next-text="›" first-text="«" last-text="»"></ul>
-->
</div>
</uib-accordion>
</div>
<div ng-switch-when="upload">
<!-- Multiple files -->
<button class="btn" ngf-select ng-model="files" ngf-multiple="true">Select Files</button>
<button class="btn" ng-click="submit()">Submit</button>
</div>
</div>
这是我的js代码：
docsApp.controller('docsController', function ($scope, $http, $sce) {
$scope.docsterm = "";
$scope.results = "";
$scope.currentPage = 1;
$scope.content = "";
$scope.content_type = "";
$scope.postData = function(docsterm) {
$http({
url: 'http://192.168.100.30:9200/my_index4/_search?q=' + $scope.docsterm,
method: "POST"
})
.then(function(response) {
$scope.results = response;
// $scope.content_type = response.data.
console.log($scope.results);
/*console.log($scope.content);
console.log($scope.content_type);*/
},
function(response) { // optional
$scope.results = "No results found."
});
}
但是，docsterm没有传递到 js 文件。 在控制台中，我可以看到正在发送的$http请求是：
http://192.168.100.30:9200/my_index4/_search?q=
它应该是：
http://192.168.100.30:9200/my_index4/_search?q=whateverDocstermIs
值得注意的是，当确切的下载函数代码未嵌套在ng-switch中时，它可以正常工作，这使我相信ng-switch导致了一些问题。
有什么想法吗？谢谢！
我的猜测，这是因为ng-switch的行为像ng-if- 它创建了自己的范围。
要达到控制器的范围，您需要在模型之前进行$parent.
<input type="text" ng-model="$parent.docsterm" my-enter="postData()" placeholder="Search">
这是一个例子(带和不带$parent(
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "download"
$scope.foo = function() {
console.log("Works:", $scope.docsterm);
console.log("Doesn't work:", $scope.docsterm2);
}
});<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-switch="name">
<div ng-switch-when="download">
<input type="text" ng-model="$parent.docsterm">
<input type="text" ng-model="docsterm2">
<button ng-click="foo()">Click</button>
</div>
<div ng-switch-when="upload">
...
</div>
</div>
</div>
</body>
</html>