Question

我有$watch功能，只要选择了某个国家/地区，它就会监视，但它不会将更改后的数据保存到范围内。我有一个ui-view，工作正常，但后来我改变了结构，现在在同一页面下有两个ui-views，两个都使用相同的控制器。改变的原因是有一个干净的html页面，我总是可以回到一个ui-view，但它很混乱。这是它开始出现问题的地方。

这是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-views：

<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，我认为当有两个ui-views时会出现问题。在此先感谢您的帮助。

更新

找到我的问题的解决方案，因此我需要将$parent添加到我的模型中，并将更改的数据作为参数传递给我的$watch函数：

html update：

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

$ watch不显示两个ui-views的变化

2 个答案: