Question

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

集中区域是搜索点击功能在触发功能时未找到正确的ng模型。我认为这是因为因为隐藏元素在加载时不可用，所以ng-model =＆＃34; searchQueryStringMobile＆＃34;并不是以某种方式应用于范围。

我的问题是如何获得ng-model =＆＃34; searchQueryStringMobile＆＃34;在追踪显示之后应用于范围或在点击后点击ng-click =＆＃34; flipNav（＆＃39; search＆＃39;）＆＃34;因此，当您激活ng-click =＆＃34; loadSearchResults＆＃34;？

时，它不会返回undefined

以下是代码：

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。因为ng-switch创建了自己的新范围，它是其父级的子范围，所以如果你使用{ {1}}，然后它会正常工作或如果你使用ng-model=$parent.searchQueryStringMobile代替ng-show，它会起作用，因为ng-swtich不会创建新的子范围，它只是设置标记＆＃39; s ng-show属性css到display和none允许您从子范围访问父作用域的项目。在您的示例中，$parent位于父作用域中$scope.searchQueryStringMobile的范围。这是工作插件click

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

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>元素的ng-model。

Answer 2

你的问题非常简单。 ng-switch就像ng-if创建新范围一样，所以当你使用ng-model时，yu会为这个新范围赋予属性，而不是你的控制器使用的范围。

解决方案是使用控制器作为语法或使用在作用域上创建的某个对象的属性。为了说明这一点，我为你创建了一个例子。

正如您所看到的，{{a}}在新范围之外无效，但{{x.b}}的效果很好。

＆＃13;

<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>

＆＃13;

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

2 个答案: