在angularjs中为每个视图创建一个控制器答案

【问题标题】：Creating a controller to each view in angularjs在angularjs中为每个视图创建一个控制器
【发布时间】：2014-02-05 15:05:57
【问题描述】：

我是 AngularJS 的初学者，我想为每个视图创建一个控制器，但是这个文件只有在我加载视图时才能被引用，所以：

my app.js:

var app = angular.module('app',['ngRoute']);

app.config(function($routeProvider)
{
    $routeProvider
    .when('/', { 
        templateUrl : 'app/views/login.html'
    })
    .when('/calendar', {
        templateUrl : 'app/views/calendar.html'
    })
    .otherwise ({ redirectTo: '/' });
});

app.run( function($route, $rootScope, $location)
{
    $rootScope.$on( "$routeChangeStart", function() 
    {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = load_script($location.path());
        document.body.appendChild(s);
    });
});

function load_script(location) 
{
    switch(location)
    {
        case '/'            : return 'app/controllers/loginController.js';
        case '/calendar'    : return 'app/controllers/calendarController.js';
    }
}

在视图中我设置了控制器的名称并放置了一个指令来测试：

<h1>Página login!</h1>

<div ng-controller="loginCtrl">
    <p ng-bind="teste"></p>
</div>

在我设置的控制器中：

app.controller('loginCtrl', function($scope)
{
    $scope.teste = 'loginCtrl';
});

我这样做了，但 $scope.teste 的值没有改变。我该如何解决这个问题？

【问题讨论】：

标签： javascript angularjs angularjs-routing angularjs-controller

【解决方案1】：

您将脚本添加到您的页面，但您不知道它何时被实际获取和解析。它可能正在等待服务器或没有及时解析，以便 Angular 在调用它之前注册它。您必须为脚本加载时设置延迟和管理回调，并解决承诺让 Angular 知道什么时候一切都好继续。它的工作量更大。

此外，由于您的应用已经加载，您需要在事后使用$controllerProvider.register 注册您的控制器。

如果您不想做这项工作（我只建议您自己做，以了解它是如何工作的），有很多解决方案可以解决您尝试的问题。尝试四处寻找“angularjs 延迟加载”或查看以下内容：https://github.com/nikospara/angular-require-lazy

【讨论】：