ocLazyLoad and Angular UI Router

2019-09-04 18:52发布

问题:

I'm using oclazyload to load an Angular controller dynamically, when I enter a specific nested state.

That nested state:

.state('login.home', {
  url: "home",
  views: {
    "nav-right": {
      templateProvider: function($http, $stateParams) {
        return $http({
          method: 'GET',
          url: '/homeVnR'
        }).then(function successCallback(html) {
          return html.data;
        });
      }
    },
    "content@": {
      templateProvider: function($http, $stateParams) {
        return $http({
          method: 'GET',
          url: '/homeV'
        }).then(function successCallback(html) {
          return html.data;
        });
      },
      controller: "authhomeCtrl"
    }
  },
  resolve: {
    loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
      // you can lazy load files for an existing module
      return $ocLazyLoad.load('authHome')
    }]
  }
  //all other states go below
})

You can see it in my resolve in the content@ view.

authHome is defined like so:

app.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) {
  $ocLazyLoadProvider.config({
      debug:  true,
      events: true,
      modules: [{
        name:"authHome",
        files: [
          "/homeC.js"
        ],
      }]
  });
}]);

I see in my ajax requests that /homeC.js is hit and gets a 200 back with the proper Javascript.

It looks like this:

app.controller('authhomeCtrl', ['$scope', '$http', '$timeout', '$interval', '$filter', '$uibModal', '$state', '$uibModalInstance', function($scope, $http, $timeout, $interval, $filter, $uibModal, $state, $uibModalInstance) {
scope.viewAttempt = function(){
alert("VIEW!");
}   
}]);

But I get an error: