$ scope ng-clickイベントを隠し要素に表示した後に適用します。

Question

詳しい説明は私に聞いてください。私は自分のサイトのヘッダーにグローバルな検索機能を組み込んだ。同じng-clickイベントを使用するモバイル検索用の別の入力ボックスを表示するとしますが、ページが読み込まれると入力が表示されません。一度表示されたら、モバイルng-clickで隠された入力値を取得するのに問題があります。

検索のクリック機能は、機能がトリガされたときに正しいngモデルを見つけられません。私はそれが隠された要素が読み込み時に利用できないので、ng-model = "searchQueryStringMobile"が何とかスコープに適用されないからだと思います。

私の質問は、調査後に表示された後、またはng-click = "flipNav（ 'search'）をポストクリックした後、スコープにng-model =" searchQueryStringMobile "を適用する方法です。 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を使用すると、正常に動作します。を使用する場合$scope.searchQueryStringMobileが親スコープ内にある、ng-show doesntのは、新しい子スコープを作成するので、代わりにng-swtichの0は、それが動作しますが、それだけでnoneにマークアップのcssプロパティdisplayを設定し、$parentは、あなたがあなたの例scope.In子から親スコープの項目にアクセスすることができます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にごng-switchマークアップを変更することができますclick

をplunkです。

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>