Angularjs $watch不显示带有两个ui视图的更改

我有

$watch

功能，每当选择一个国家时，它都会进行监视，但不会将更改的数据保存到范围中。我有一个ui视图，工作正常，但后来我改变了结构，现在在同一个页面下有两个ui视图，都使用相同的控制器。更改的原因是为了有一个干净的html页面，我总是可以返回到一个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-用户界面视图：

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

以下是querySetup视图：

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

请帮忙！我不熟悉Angular$watch，我认为当有两个ui视图时会出现问题。提前感谢你的帮助

更新

找到了问题的解决方案，因此我需要将

$parent

添加到我的模型中，并将更改后的数据作为参数传递给我的

$watch

函数：

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>

---

这解决了问题，但仍然不太明白为什么我需要添加父对象。有人能解释一下原因吗？

您的控制器设置为在homepage中使用，但您的模板在homepage.show中使用，homepage.show是homepage的子状态。为了从该控制器访问变量，您可以使用$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'
            }
        }
    })

---

我认为这是因为子状态在指令上的操作与原型继承（

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>

精选品牌

我按照推荐的结构，取出了

$parent

，而

$watch

不起作用。我需要离开

$parent

还是需要用

$watch

做其他事情？对于url，我没有设置为

/homepage

，我需要它是

/

。或者它必须是“主页”吗？所以它不像我想象的那样工作。每个ui视图创建一个子作用域，该子作用域无权访问其同级作用域的变量。这让你在沟通方面有两个选择。1.您可以使用$scope.$broadcast/$scope.$on广播一个事件，然后收听它2。您可以使用服务进行通信或3。您可以使用$parent。如果您决定使用$parent，我建议您不要创建手表，因为ng模型已经隐式地添加了手表。而是设置ng model=$parent.pickedCountry，然后在结果中将其显示为{{pickedCountry}

.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'
            }
        }
    })

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

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