Question

我对AngularJS来说相对较新，现在已经开始淘汰了几天，开始拔头发。

想象一下两个窗格页面。左侧是父视图，右侧是子视图。子视图内容基于在左侧父视图中选择的子视图。

当我第一次加载页面时，我的父视图正确加载（它使用ui-sref显示其可点击儿童的列表）。子视图为空，因为该网址未完全填充，只有＆＃39; / parent＆＃39 ;;它还没有“孩子”这样的孩子。州。没关系。

我第一次点击某个孩子时，状态会从＆＃39; / parent＆＃39;到＆＃39; / parent / child1＆＃39;并使用＆＃39; child1＆＃39;加载子视图精美的数据 - 就像我想要的那样。

但是，无论我在父视图中点击什么其他Child，我的子视图都不会重新加载/刷新;它留在了孩子1＆＃39;数据。但网址会根据新点击的“孩子”进行更改。路径。所以，如果我点击“孩子9”网址更改为＆＃39; / parnet / child9＆＃39;但是＆＃39; child1＆＃39;数据仍然存在。

如果我刷新并重新开始并选择＆＃39; child2＆＃39;它仍然可以很好地工作，加载孩子2＆＃39;数据无法加载孩子9＆＃39; - 同样的问题。

任何帮助将不胜感激。我尽力为同样陷入困境的其他人写这篇文章。

来自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}}

控制器：

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);
});

AngularJS：重新加载子视图

1 个答案: