javascript - 在 angularjs 中为每个 View 创建一个 Controller

Question

我是 AngularJS 的初学者，我想为每个 View 创建一个 Controller ，但是这个文件只能在加载 View 时引用，所以:

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';
    }
}

在 View 中，我设置了 Controller 的名称并放置了一个指令来测试:

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

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

在 Controller 中我设置:

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

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

Answer 1

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

此外，由于您的应用已经加载，因此您需要使用 $controllerProvider.register 来注册您的 Controller 。

如果您不想做这项工作(我只建议您自己做，作为了解其工作原理的一种方式)，对于您想要尝试的事情，有大量的解决方案。尝试四处寻找“angularjs 延迟加载”或查看以下内容:https://github.com/nikospara/angular-require-lazy