AngularJS:重新加载 subview

Question

我对 AngularJS 还比较陌生，已经搜索了几天了，并开始抓狂。

想象一个有两个 Pane 的页面。左侧是父 View ，右侧是 subview 。 subview 内容取决于在左侧父 View 中选择的 subview 。

当我第一次加载页面时，我的父 View 加载正确(它使用 ui-sref 显示其可点击 subview 的列表)。 subview 为空，因为 URL 未完全填充，只有“/parent”；它还没有“子”状态。那很好。

我第一次点击子项时，状态从“/parent”更改为“/parent/child1”，并且它使用“child1”数据漂亮地加载 subview - 这正是我想要的方式。

但是，无论我在父 View 中单击哪个其他 subview ，我的 subview 都不会重新加载/刷新；它保留“child1”数据。但 URL 会根据新单击的“子”路径而更改。因此，如果我单击“child9”，网址将更改为“/parnet/child9”，但“child1”数据仍然存在。

如果我刷新并重新开始并选择“child2”，它仍然可以很好地工作，加载“child2”数据而无法加载“child9” - 同样的问题。

如有任何帮助，我们将不胜感激。我尽力为处于同样困境的其他人写下这篇文章。

来自index.html:

  <div ng-controller="ParentController">
    <li ng-repeat="child in childs" ui-sref-active="active">
    <a ui-sref="parent.child({child:child.filter})">
    {{child.name}}

  <div ng-controller="ChildController">
    <li ng-repeat="childData in childData">
    {{childData}}

Controller :

app.controller('ParentController', ['$scope', '$rootScope', function($scope, $rootScope,) {
// This controller presents a list of the parent's children that are clickable 

app.controller('ChildController', ['$scope', '$state', '$rootScope', '$stateParams', 'ChildService', function($rootScope, $state, $scope, $stateParams, ChildService) {
// This controller presents contents of the child

服务:

app.service('ParentService', function($rootScope){
// This service returns Parent Data from third party, in this case Firebase.

app.service('ChildService', function($stateParams){
    var child = $stateParams.child;
// This service returns Child Data from third party, in this case Firebase.

来自 App.js:

    $stateProvider
        .state('parent', {
            abstract: true,
            url: '/parent',
            templateUrl: 'home/parent.html',
                }]
            }
        })
        .state('parent.child', {
            url: '/{child}',
            templateUrl: 'home/child.html'
        })

Answer 1

在 Angular 中，服务和工厂都是单例——它们只被调用一次，无论你返回什么都是服务。您的 CHildService 和 ParentService 仅在您第一次加载相应页面时才会被调用。

相反，你想做这样的事情:

app.service('ChildService', function(){
  // return a function that can be called with each page load
  return function(childId) {
     // I have no idea what this service returns, so I'm just making something up
     return listOfChildren[childId];
  }
});

app.controller('ChildController', function($scope, $stateParams, ChildService) {
   // get the child based on the CURRENT value of child query parameter
   $scope.child = ChildService($stateParams.child);
});