appCtrl不是一個函數，嘗試加載appCtrl時觸發undefined錯誤（ON FLY）

我想在需要時動態加載控制器，而不是一次加載它們。所以，我已經實現了動態方法，它可以正常工作，沒有任何錯誤。它也適用於Ui-Router。但問題出在Index.html頁面。我想把全球（超級父母）控制器名稱「appCtrl」。由於這個appCtrl應該在我運行我的應用時初始化。爲此，我需要在body標籤處寫入ng-controller =「appCtrl」或ng-controller =「appCtrl as vm」。appCtrl不是一個函數，嘗試加載appCtrl時觸發undefined錯誤（ON FLY）

但是，當我這樣做，它給出錯誤，appCtrl是一個函數，得到了未定義。我嘗試了很多方法，但仍然無法確定確切的錯誤。我已經在這個問題上工作了兩三天，但仍然無法識別它。

我製作了這個plunker。

看看index.html的body標籤。

main.js

require.config({ 
    paths: { 
    "angular": "//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.1/angular", 
    "ui-router": "//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router" 
    }, 
    shim: { 
    "angular": { 
     exports: 'angular' 
    }, 
    "ui-router": { 
     deps: ['angular'] 
    } 
    } 
}); 

define(
    ['angular', 
    'app', 
    'controllers/appCtrl'], 
    function (angluar, app) { 
    angular.bootstrap(document, ['MyApp']) 
});

app.js

define([ 
    'angular', 
    'ui-router' 
], function (angular) { 
    var app = angular.module('MyApp', ['ui.router']); 

    function lazy() { 
    var self = this; 
    this.resolve = function (controller) { 
     return { 
     ctrl: ['$q', function ($q) { 
      var defer = $q.defer(); 
      require(['controllers/' + controller], function (ctrl) { 
       app.register.controller(controller, ctrl); 
       defer.resolve(); 
      }); 
      return defer.promise; 
     }] 
     }; 
    }; 
    this.$get = function(){ 
     return self; 
    }; 
    } 
    function config ($stateProvider, $urlRouterProvider, 
        $controllerProvider, $compileProvider, 
        $filterProvider, $provide, lazyProvider) { 
    $stateProvider 
     .state("home", { 
     url: "/", 
     controller: 'homeCtrl', 
     controllerAs: 'vm', 
     templateUrl: 'views/homeView.html', 
     resolve: lazyProvider.resolve('homeCtrl') 
     }); 
    app.register = { 
     controller: $controllerProvider.register, 
     directive: $compileProvider.directive, 
     filter: $filterProvider.register, 
     factory: $provide.factory, 
     service: $provide.service, 
     constant: $provide.constant 
    }; 
    } 
    app.provider('lazy', lazy); 
    app.config(config); 

    return app; 
});

的Index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.js" data-main="main.js"></script> 
    </head> 
    <body ng-controller="appCtrl as vm"> // I want this to work correctly but it is not getting loaded dynamically. I don't know why. Help me to resolve it. 

    <a ui-sref="home">go home</a> 
    <ui-view></ui-view> 

    {{vm.appVar}} 
    </body> 
</html>

來源

2015-11-16 nyks

在您的index.html頁面，您requireJS只打了個電話，然後配置你的角度框架，所以呈現index.html頁面後，您的角度框架的構建，這就是爲什麼你無法在index.html頁面調用appCtrl的原因。 –

有幫助嗎？從body標籤中刪除ng-app =「appCtrl」代碼並運行它，然後單擊go home鏈接。它工作正常。但是我想在加載頁面時以某種方式加載appCtrl。如果你有解決方案，請更新我的plunkr。 – nyks

你實際上是缺少控制器代碼控制器聲明。使用下面的代碼

define(['app'], function (app){ //Updated Line 
    console.log('app controller loaded'); 
    app.controller('appCtrl',ctrl); //New Line added 
    ctrl.$inject = ['$http']; 
    function ctrl ($http) { 
    this.appVar = 'hi from appCtrl'; 
    }; 
    return ctrl; 
});

見plunker

來源

2015-11-16 09:15:59

我在這裏有一個問題。爲什麼其他控制器不需要這行，爲什麼appCtrl呢？ – nyks

非常好的問題。我沒有答案。你可以在這裏發佈一個新的問題，並等待其他人回答。不要忘記也要標記這個問題。 –

你是什麼意思，別忘了標記這個問題呢？那是什麼？ – nyks

appCtrl不是一個函數，嘗試加載appCtrl時觸發undefined錯誤（ON FLY）

回答

相關問題