ng-switch 不传递参数

Question

我正在使用 ng-switch 在我的网络应用程序的两个功能之间切换，下载和上传（由两个按钮控制）。当用户想要下载时，我使用文本框和提交按钮将搜索查询传递到我的 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="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></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 导致了一些问题。

有什么想法吗？谢谢！

Answer 1

我猜，这是因为 ng-switch 的行为类似于 ng-if - it creates its own scope。

要达到控制器的范围，您需要在模型之前有 $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>

ng-switch 不传递参数

ng-switch not passing argument

html

angularjs

ng-switch