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

Question

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

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

我的问题是如何在 ng-model="searchQueryStringMobile" 死后显示或 post-click ng-click="flipNav('search')" 后应用到范围中这样当您激活 ng-click="loadSearchResults"?

时它就不会 return 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 创建了它自己的新作用域，它是其父作用域的子作用域，所以如果你使用 ng-model=$parent.searchQueryStringMobile ，那么它将正常工作，或者如果您使用 ng-show 而不是 ng-swtich ，它将起作用，因为 ng-show 不会创建新的子范围，它只是设置标记的 css 属性 display 到 none 和 $parent 允许您从子 scope.In 访问父范围的项目，您的示例，$scope.searchQueryStringMobile 在父范围内ng-switch 的范围。这里是工作 plunk 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>

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

Apply $scope ng-click event to hidden element after it is displayed

javascript

angularjs

angularjs-scope

angularjs-ng-click

angular-ngmodel