Question

我是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的值不会改变。我该如何解决这个问题？

Answer 1

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

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

如果你不想做这项工作（我只建议你自己去做，以了解它是如何运作的），那么你有很多解决方案可以尝试。试着四处寻找“angularjs lazy load”或查看：https://github.com/nikospara/angular-require-lazy

为angularjs中的每个视图创建一个控制器

1 个答案: