2014-10-16 50 views
4

我正在創建一個角度應用程序,並且想動態加載控制器。我看你可以使用一個名爲ocLazyLoad模塊(這裏https://github.com/ocombe/ocLazyLoad找到)當用OcLazyLoad動態加載控制器時,AngularJs會凍結

現在我相信我所做的一切,我需要(顯然做錯了),但是當我嘗試運行我的應用程序,沒有加載和瀏覽器剛凍結。如果我正常加載控制器,它工作正常,整個頁面加載。

下面是一些代碼

app.js

var App = angular.module('MyApp', ['ui.router', 'ngStorage', 'ngCookies', 'pascalprecht.translate', 'oc.lazyLoad']); 

config.state.js

App.config(['$stateProvider', '$httpProvider', '$locationProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$ocLazyLoadProvider', 
    function ($stateProvider, $httpProvider, $locationProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $ocLazyLoadProvider) { 

     'use strict'; 

     // enable html5Mode 
     $locationProvider.hashPrefix('!').html5Mode(true); 

     // defaults to home 
     $urlRouterProvider.otherwise('/admin/settings'); 

     // config ocLazyLoad  
     $ocLazyLoadProvider.config({ 
      events: true 
     }); 


     App.controller = $controllerProvider.register; 
     App.directive = $compileProvider.directive; 
     App.filter = $filterProvider.register; 
     App.factory = $provide.factory; 
     App.service = $provide.service; 
     App.constant = $provide.constant; 
     App.value = $provide.value; 

     // states 
     $stateProvider 
      .state('admin', { 
       url: '/admin', 
       abstract: true, 
       controller: 'AdminController', 
       templateUrl: basePath('admin/admin.html') 
      }) 
      .state('admin.settings', { 
       url: '/settings', 
       controller: 'SettingsController', 
       templateUrl: basePath('admin/settings/settings.html'), 
       resolve: { 
        loadController: ['$ocLazyLoad', function ($ocLazyLoad) { 
         return $ocLazyLoad.load({ 
          name: 'admin-settings', 
          files: ['/Scripts/app/components/admin/settings/settings-controller.js'] 
         }); 
        }] 
       } 

      }); 
     }); 

     function basePath(uri) { 
      return '/Scripts/app/components/' + uri; 
     }; 
    }]); 

管理,controller.js

App.controller('AdminController', ['$rootScope', '$scope', '$state', '$localStorage', '$translate', '$timeout', '$window', function ($rootScope, $scope, $state, $localStorage, $translate, $timeout, $window) { 
    'use strict'; 

    //... some code here 
}]); 

設置控制器。 js

App.controller('SettingsController', ['$scope', function ($scope) { 
    console.log("settings loaded"); 
}]); 

的index.html(使用asp.net MVC)

<!DOCTYPE html> 
<html ng-app="MyApp"> 
<head> 
    <title ng-bind="models.helloAngular"></title> 
    @Styles.Render("~/Content/css") 
    <link rel="stylesheet" href="~/Content/app.css" /> 
</head> 
<body class="layout-boxed"> 
    <section class="wrapper" ui-view></section> 

    @Scripts.Render("~/bundles/angular") 
    @Scripts.Render("~/bundles/angular-translate") 
    @Scripts.Render("~/bundles/angular-storage") 
    @Scripts.Render("~/bundles/app") 

</body> 
</html> 

admin.html

<!-- Main section--> 
<section> 
    <!-- Page content--> 
    <div ui-view autoscroll="false" ng-class="app.viewAnimation" class="content-wrapper"> 

    </div> 
</section> 

settings.html

<div>here</div> 
+0

我現在正在解決同樣的問題,但到目前爲止我還沒有任何解決方案。 – misco 2014-10-16 15:49:36

+0

我已經聯繫了github上的開發。如果你可以給他一個示例應用程序,他會修復它 – Gillardo 2014-10-17 17:16:05

+0

OcLazyLoad中有錯誤嗎? – misco 2014-10-17 20:03:56

回答

-1

放下面的代碼在你的控制器的js

(function() { 
     angular.module('MyApp').controller(('AdminController', ['$rootScope', '$scope', '$state', '$localStorage', '$translate', '$timeout', '$window', function ($rootScope, $scope, $state, $localStorage, $translate, $timeout, $window) { 
     'use strict'; 

     //... some code here 
    }]); 
})()); 
相關問題