显示后将 $scope ng-click 事件应用于隐藏元素

Question

请向我寻求更好的解释。我已经在我的网站标题中构建了一个全局搜索功能。我想为移动搜索显示一个单独的输入框，该输入框使用相同的 ng-click 事件，但在页面加载时不显示输入。一旦显示，我无法在移动 ng-click 上获取隐藏的输入值。

重点区域是搜索点击功能在触发时未找到正确的 ng-model。我认为这是因为隐藏元素在加载时不可用，因此 ng-model="searchQueryStringMobile" 不会以某种方式应用于范围。

我的问题是，在死后显示或点击后 ng-click="flipNav('search')" 后，如何在范围内应用 ng-model="searchQueryStringMobile" 使其不返回 undefined当您激活 ng-click="loadSearchResults" 时？

代码如下：

HTML：

<div ng-controller="HeaderCtrl as header" class="container">
    <div id="jesusSearchTop">
        <input ng-model="searchQueryString" class="jesusSearchInput autoCompSearch" type="search" placeholder="Search..." autocomplete="off" />
        <select ng-model="searchDDL.item" class="jesusSearchSelect" ng-options="item.name for item in searchDDL track by item.id"></select>
        <div class="jesusSearchHolder">
            <img class="goSearch" ng-model="jesusSearch" ng-click="loadSearchResults('norm')" src="/EMR4/img/gui_icons/searchIcon.png" alt="Search EMR" />
        </div>
    </div>
    <div id="siteControls">
        <div id="siteSearch" class="siteControl" ng-click="flipNav('search')"></div>    
    </div>
    <div ng-switch="dd" class="dropDown">
        <div ng-switch-when="none" style="display:none"></div>
        <div ng-switch-when="search" class="dropMenu listStyle4" id="Search">
            <input ng-model="searchQueryStringMobile" class="jesusSearchInput" type="text" placeholder="Search..." autocomplete="off" />
            <select ng-model="searchDDL.item" class="jesusSearchSelect" ng-options="item.name for item in searchDDL track by item.id"></select>
            <div class="jesusSearchHolder">
                <img class="goSearch" ng-model="jesusSearchMobile" ng-click="loadSearchResults('mob')" src="/EMR4/img/gui_icons/searchIcon.png" alt="Search EMR" />
            </div>
        </div>
    </div>
    <div class="clr"></div>
</div>

控制器：

app.controller('HeaderCtrl', function ($scope, $http, $location, populateDDL) {
            $http.get(badge.credentials[7].home+'data.JSON')
            .success(function(data, status, headers, config) {
                $scope.header = data.header;
                $scope.searchOptions = new populateDDL('tblWebMenuItems',badge.credentials[1].key).
                then(function(response) {
                    $scope.searchDDL = response.tblWebMenuItems
                    $scope.searchDDL.item = $scope.searchDDL[0];
                });
            })
            .error(function(data, status, headers, config) {
                console.log(data+', '+status+', '+headers+', '+config);
            });
            $scope.flipNav = function(choice){
                if ($scope.dd === choice) {
                    console.log(choice);
                    $scope.dd = "none";
                }else {
                    $scope.dd = choice;
                }
            };
            $scope.loadSearchResults = function(uv) {
                var loader;
                if (uv === "mob") {
                    loader = $scope.searchQueryStringMobile;
                }else if (uv === "norm") {
                    loader = $scope.searchQueryString;
                }
                console.log(uv+' - '+loader);
                if (loader == null || loader < 2) {
                    alert('Please refine your search and continue, Thank you!');
                }else {
                    $location.path("/search/"+$scope.searchDDL.item.name.toLowerCase()+"/");
                    $location.search("type",$scope.searchDDL.item.name.toLowerCase());
                    $location.search("query", loader);
                }
            };
        });

Answer 1

我测试了您的代码，发现这是因为 ng-switch.As ng-switch 创建了自己的新范围，即其父范围的子范围，所以如果您使用 ng-model=$parent.searchQueryStringMobile ，那么它会正常工作或者如果您使用 ng-show 而不是 ng-swtich ，它将起作用，因为 ng-show 不会创建新的子范围，它只是将标记的 css 属性 display 设置为 none 和 $parent 允许您访问来自子范围的父范围的项目。在您的示例中，$scope.searchQueryStringMobile 位于ng-switch 范围的父范围内。这是工作的笨蛋click

您可以将ng-switch 标记更改为此

<div ng-switch="dd" class="dropDown" >
    <div ng-switch-when="none" style="display:none"></div>
    <div  ng-switch-when="search" class="dropMenu listStyle4" id="Search">
        <input ng-model="$parent.searchQueryStringMobile" class="jesusSearchInput" type="text" placeholder="Search..." autocomplete="off" />
        <select ng-model="searchDDL.item" class="jesusSearchSelect" ng-options="item.name for item in searchDDL track by item.id"></select>
        <div class="jesusSearchHolder">
            <img class="goSearch" ng-model="jesusSearchMobile" ng-click="loadSearchResults('mob')" src="/EMR4/img/gui_icons/searchIcon.png" alt="Search EMR" />
        </div>
    </div>
</div>

请注意上述代码中input 元素的ng-model。

Answer 2

你的问题很简单。 ng-switch 就像 ng-if 创建新范围一样，所以当您使用 ng-model 时，您将属性分配给这个新范围，而不是控制器使用的范围。

解决方案是使用控制器作为语法或使用在范围内创建的某些对象的属性。为了说明这一点，我为您创建了示例。

如您所见，{{a}} 在新范围之外无法工作，但 {{x.b}} 工作正常。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-init="x = {}; show = 'first'">
  <button type="button" ng-click="show = 'first'">show first</button><br>
  <button type="button" ng-click="show = 'second'">show second</button><br>
  a = {{a}}<br>
  x.b = {{x.b}}
  <div ng-switch="show">
    <div ng-switch-when="first">
      <input type="text" ng-model="a">
    </div>
    <div ng-switch-when="second">
      <input type="text" ng-model="x.b">
    </div>
  </div>
</div>