angularjs – 从resolve函数访问数据而不重新连接控制器

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

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

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

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

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

我们做了一个小掠夺者来证明我们的问题here

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

解决方法

不太好,但工作解决方案是使用事件.好吧,也许它不是那么糟糕,至少它并不复杂.
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)
  })
;

编辑：
一个更复杂的解决方案,需要将promise创建函数更改为observables,但有效：
https://plnkr.co/edit/1j1BCGvUXjtv3WhYN84T?p=preview

angular.module('app',{
      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>'
        },{
      views: {
        'child@': {
          controller: 'childCtrl',template: '<b>{{ id }}</b>'
        }
      },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,$state) {
    $log.info('parentCtrl');
    var notify = true;
    $scope.go = function(id) {
      $state.go('parent.child',{notify: notify});
      notify = false;
    };
  })
  .controller('childCtrl',function($scope,$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;
  }
}