Question

我的项目有以下设置。一切正常。在我的Index.html中，我有两个链接（两个$ state）。如果我单击其中一个，则根据需要动态启动相应的控制器。所以动态概念很好。但请查看下面的index.html页面，

的index.html

<script src="~/Scripts/require.js" data-main="ANGULAR/main.js"></script>

<div data-ng-controller="appCtrl">   // only this line is not working and throwing an error saying appCtrl is not a function... 

       // Everything works fine. There is no problem at all. But look at the above line (data-ng-controller="appCtrl"). I know how can I initiate controller dynamically this way?
       // When this line gets initiated it throws an error stating that appCtrl is not a function. I really don't know how to initiate appCtrl with this following setup.

    <a ui-sref="dashboard">DASHBOARD</a><br /> //works fine
    <a ui-sref="login">LOGIN</a>               //works fine
    <ui-view></ui-view>                        //works fine

</div>

main.js

require.config({
    paths: {

        "angular": "//localhost:59293/Scripts/angular",
        "ui-router": "//localhost:59293/Scripts/angular-ui-router",
        "ui-bootstrap": "//localhost:59293/Scripts/angular-ui/ui-bootstrap-tpls",

       // "appCtrl":"//localhost:59293/ANGULAR/APP/appCtrl"

    },
    shim: {
        "angular": {
            exports: 'angular'
        },
        "ui-router": {
            deps: ['angular']
        },
        "ui-bootstrap": {
            deps: ['angular']
        },


      //  "appCtrl": {
      //      deps: ['angular']
      //  }

    }
});

define(
       ['angular',
        'APP/app',

        'APP/appCtrl'    // Should I write this here ????????????????

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

app.js看起来像这样，

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

    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) {

        $urlRouterProvider.otherwise('/dashboard');


        $stateProvider
          .state("dashboard", {
              url: "/dashboard",
              controller: 'Dashboard/dashboardCtrl',  // this works fine
              controllerAs: 'vm',
              templateUrl: 'ANGULAR/TEMPLATES/DASHBOARD/dashboard.html',
              resolve: lazyProvider.resolve('Dashboard/dashboardCtrl')
          })

          .state("login", {
              url: "/login",
              controller: 'loginCtrl',   //this works fine
              controllerAs: 'vm',
              templateUrl: 'ANGULAR/TEMPLATES/Login.html',
              resolve: lazyProvider.resolve('loginCtrl')
          })
        ;
        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;
});

appCtrl.js //我想让它正常工作。

          //This controller doesn't get called with data-ng-controller attribute :(           
          // how and where should I add appCtrl.js reference as it is not defined in route config function? in main.js? if Yes, then how?
          // I have commented code in main.js. please help and suggest.


define([
], function () {
    console.log('appCtrl controller loaded');
    ctrl.$inject = ['$http','$scope'];
    function ctrl($http,$scope) {
        this.message = '-- from a lazy controller.';
        debugger;
        $scope.myVar= "hello world";  // I want this value in HTML page.

    };
    return ctrl;
});

请查看http://plnkr.co/edit/UDqaD7QKvgqtzgttXLHq?p=preview 但是这没有按照提到的那样工作......我只是想用d-controller来启动app-controller属性。

Answer 1

首先，我从未见过这样的控制器。这可能是你的一个问题。我看到的另一个问题是你没有声明你的控制器。这是一个掠夺者http://plnkr.co/edit/f343W3?p=preview

但这是代码。首先，在你的app.js

var app = angular.module('MyApp', [
'ui.router',

// Add your controller
'MyApp.controllers.appCtrl'
]);

否则角度不会知道你的意思。第二，你的控制器：

(function (){
  'use strict';

  function appCtrl(){
    var vm = this;
    vm.appVar = "Hi from appCtrl";
  }

  angular.module('MyApp.controllers.appCtrl', [])
         .controller('appCtrl', appCtrl);
})();

完成这样的事情，角度应该没有找到你的控制器的麻烦。

如何使用ng-controller属性动态加载appCtrl和动态控制器（动态）概念

1 个答案: