在不重新连接控制器的情况下从resolve函数访问数据

Question

如何在不重置控制器的情况下从解析功能访问数据？

我们目前正在开发一个使用的项目angular-ui-router.我们有两个单独的视图:左边是父元素列表,右边是元素子数据.

如果在左侧选择父级,我们将其子级数据解析为右侧的子视图.

目标是不对子控制器(和视图)进行自动加载,在选择不同的父元素时,我们设置notify:false.

我们设法在不重新加载控制器和视图的情况下"重新解析"子控制器数据,但数据(范围)不会刷新.

我们做了一个小plunker来证明我们的问题在这里

首先单击一个数字以实例化控制器childCtrl.每次跟随点击都应该更改子范围数据 - 这不起作用.您可能会注意到alert输出已经包含我们要显示的刷新数据.

Answer 1

不太漂亮，但可行的解决方案是使用事件。好吧，也许事情并没有那么糟糕，至少不复杂。 https://plnkr.co/edit/SNRFhaudhsWLKUNMFos6?p=preview

angular.module('app',[
    'ui.router'
  ])
  .config(function($stateProvider) {
    $stateProvider.state('parent', {
      views:{
        'parent':{
          controller: 'parentCtrl',
          template: '<div id="parent">'+
            '<button ng-click="go(1)">1</button><br>'+
            '<button ng-click="go(2)">2</button><br>'+
            '<button ng-click="go(3)">3</button><br>'+
          '</div>'
        },
      },
      url: ''
    });


    $stateProvider.state('parent.child', {
      views:{
        'child@':{
          controller: 'childCtrl',
          template:'<b>{{ id }}</b>'
        }
      },
      url: '/:id/child',
      resolve: {
        detailResolver: function($http, $stateParams, $rootScope) {
          return $http.get('file'+$stateParams.id+'.json')                
            .then(function(response) {
              alert('response ' + response.data.id);

              $rootScope.$broadcast('newData', response.data);

              return response.data;
            });
        }
      }
    });
  })
  .controller('parentCtrl', function ($log, $scope, $state) {
    $log.info('parentCtrl');
    var notify = true;
    $scope.go = function (id) {
      $state.go('parent.child', {id: id}, {notify:notify});
      notify = false;
    };
  })
  .controller('childCtrl', function ($scope, $log, detailResolver, $interval) {
    /*
     * some stuff happens here
     */

    $log.info('childCtrl detailResolver.id == ' + detailResolver);

    $scope.$on('newData', function (event, detailResolver) {
      $scope.id = detailResolver;
    });

    $scope.id = detailResolver;
    $interval(function(){
      console.log(detailResolver.id)
    },1000)
  })
;

编辑：一个更复杂的解决方案，需要将承诺创建者函数更改为可观察量，但有效： https: //plnkr.co/edit/1j1BCGvUXjtv3WhYN84T ?p=preview

angular.module('app', [
    'ui.router'
  ])
  .config(function($stateProvider) {
    $stateProvider.state('parent', {
      views: {
        'parent': {
          controller: 'parentCtrl',
          template: '<div id="parent">' +
            '<button ng-click="go(1)">1</button><br>' +
            '<button ng-click="go(2)">2</button><br>' +
            '<button ng-click="go(3)">3</button><br>' +
            '</div>'
        },
      },
      url: ''
    });


    $stateProvider.state('parent.child', {
      views: {
        'child@': {
          controller: 'childCtrl',
          template: '<b>{{ id }}</b>'
        }
      },
      url: '/:id/child',
      resolve: {
        detailResolver: turnToObservable(['$http', '$stateParams', function($http, $stateParams) { //Have to be decorated either be this or $inject
          return $http.get('file' + $stateParams.id + '.json')
            .then(function(response) {
              alert('response ' + response.data.id);
              return response.data;
            });
        }])
      }
    });
  })
  .controller('parentCtrl', function($log, $scope, $state) {
    $log.info('parentCtrl');
    var notify = true;
    $scope.go = function(id) {
      $state.go('parent.child', {id: id}, {notify: notify});
      notify = false;
    };
  })
  .controller('childCtrl', function($scope, $log, detailResolver, $interval) {
    /*
     * some stuff happens here
     */

    $log.info('childCtrl detailResolver.id == ' + detailResolver);

    detailResolver.addListener(function (id) {
      $scope.id = id;
    });
  });

function turnToObservable(promiseMaker) {
  var promiseFn = extractPromiseFn(promiseMaker);
  var listeners = [];

  function addListener(listener) {
    listeners.push(listener);

    return function() {
      listeners = listeners.filter(function(other) {
        other !== listener;
      });
    }
  }

  function fireListeners(result) {
    listeners.forEach(function(listener) {
      listener(result);
    });
  }

  function createObservable() {
    promiseFn.apply(null, arguments).then(fireListeners);

    return {
      addListener: addListener
    };
  }

  createObservable.$inject = promiseFn.$inject;

  return createObservable;
}

function extractPromiseFn(promiseMaker) {
  if (angular.isFunction(promiseMaker)) {
    return promiseMaker;
  }

  if (angular.isArray(promiseMaker)) {
    var promiseFn = promiseMaker[promiseMaker.length - 1];
    promiseFn.$inject = promiseMaker.slice(0, promiseMaker.length - 1);

    return promiseFn;
  }
}