$ watchは2つのui-viewで変更を表示しません

Question

私は$watchの機能を持っています。国が選択されたときに時計を表示しますが、変更されたデータをスコープに保存していません。私は1つのUIビューを持っていましたが、うまくいきましたが、構造を変更して同じページの下に2つのUIビューを表示しました。変更の理由は、きれいなHTMLページを持っていたからです。私は常に1つのUIビューに戻ることができましたが、それは面倒です。これが問題を起こした場所です。ここ

がapp.js

$stateProvider 
.state('homepage',{ 
    templateUrl: '/static/partial/home/homeLayout.html', 
    controller: 'UploadFileCtrl', 

}) 
.state('homepage.show',{ 
    url: '/', 

    views: { 
    querySetup: { 
     templateUrl: '/static/partial/home/querySetup.html', 

    }, 
    queryResults: { 
     templateUrl: '/static/partial/home/queryResults.html', 

    }, 
    } 
}) 

layout.htmlある - UI-ビュー：

<div class="col-sm-12 panel-container"> 


    <div class="col-sm-6" style="height: 100%;"> 
    <div ui-view="querySetup" ></div> 
    </div> 

    <div class="col-sm-6" style="height: 100%;"> 
    <div ui-view="queryResults"></div> 
    </div> 

</div> 

コントローラの腕時計：

$scope.currentCountries = [ 
{ 
    name: 'United States', 
    code: 'US' 
}, 
{ 
    name: 'United Kingdom', 
    code: 'GB' 
}, 
{ 
    name: 'Germany', 
    code: 'DE' 
}, 
{ 
    name: 'France', 
    code: 'FR' 
}, 
{ 
    name: 'China', 
    code: 'CN' 
}, 
{ 
    name: 'Japan', 
    code: 'JP' 
} 
]; 

$scope.$watch('pickedCountry', function(){ 

if($scope.pickedCountry != null){ 
    $scope.countryCode = $scope.pickedCountry.code; 
} 

}); 

ここではquerySetup図である：

<select name="brand" ng-model = "pickedCountry" 
     data-ng-options="country as country.name for country in currentCountries"> 
     <option value="">Select Brand</option> 
     </select> 

コントローラをstate homepageの外に移動し、state homepage.showの下の各ビューに設定しました。これは正常に機能しましたが、余分な操作は機能しません。ブランドを選択するときは、計算を実行してqueryResultsビューに設定する必要があります。結果はスコープに設定され、queryResultsに表示する必要があります。ここ

はqueryResultsです：

<div class="panel panel-info"> 
    <div class="panel-heading"> 
    <h3 class="panel-title">OSM RESULTS</h3> 
</div> 
<div class="panel-body"> 
<textarea rows="50" cols="100" class="xmlOutput"> 
    {{ queryResults }} 
</textarea> 
</div> 
</div> 

助けてください！ Angular $ watchに慣れていないと、2つのUIビューがあるときに問題が発生すると思います。あなたの助けを前にありがとう。

UPDATE

は私の問題への解決策を見つけたので、私は私のモデルに$parentを追加して、私の$watch関数へのparamとして変更されたデータを渡す必要があります。

のhtml更新：

<select name="brand" ng-model = "$parent.pickedCountry" 
     data-ng-options="country as country.name for country in currentCountries"> 
     <option value="">Select Brand</option> 
     </select> 

コントローラ更新

$scope.$watch('pickedCountry', function(data){ 

if(data != null){ 
    $scope.countryCode = data.code; 
} 

}); 

これで問題は解決しましたが、どうして私が親を追加する必要があるのか​​は分かりません。なぜ誰かが説明できますか？

Answer 1

あなたのコントローラはホームページに掲載されるように設定されていますが、あなたのテンプレートはhomepage.showのホームページの子の状態です。そのコントローラから変数にアクセスするには、親状態のスコープにアクセスするために$ parent（あなたが発見したように）を使用できます。

あなたの国の定義を再構築することをお勧めします。だから、それに対処する必要はありません。

.state('homepage', { 
    url: '/homepage', 
    views: { 
     '':{ 
      templateUrl:'/static/partial/home/homeLayout.html', 
      controller: 'UploadFileCtrl', 
      }, 
     'querySetup@homepage': { 
       templateUrl:'/static/partial/home/querySetup.html' 
      }, 
     'queryResults@homepage':{ 
       templateUrl:'/static/partial/home/queryResults.html' 
      } 
     } 
    }) 

Answer 2

私は子供の状態がディレクティブのプロトタイプ継承（scope: true）と同じように動作するので、それがあると信じています。

$scope.input = {}; 
$scope.$watch('input.pickedCountry', function(data){ 
    if(data != null){ 
     $scope.countryCode = data.code; 
    } 
}); 

とquerySetupテンプレートで：

あなたのコントローラで定義考えるかもしれません

<select name="brand" ng-model = "input.pickedCountry" 
    data-ng-options="country as country.name for country in currentCountries"> 
    <option value="">Select Brand</option> 
</select>