如何将 AngularJS 的“控制器作为”语法与多个不同的控制器一起使用

Question

我是 javascript、typescript 和 AngularJS 的新手，目前正在尝试通过构建示例应用程序来学习该语言。 我是一名来自 Actionscript / Flex 背景的经验丰富的程序员。

由于我来自 Actionscript，我真的很喜欢“控制器作为”语法，因为我不需要处理浮动的无类型 $script 对象并做我无法控制的魔法事情（我的看法是不信任的人javascript ;-)。

在这个例子中，虽然我想创建一个 html 页面来显示加载数据的各种不同服务的加载信息。我设想使用这个 html 片段作为页面顶部的标题，它可以显示专辑列表、图像列表甚至在您登录时的加载信息。

这个例子不是我在生产中会做的，因为有很多我不喜欢这种方法的地方，但这是一个学习练习，所以我试图弄清楚它是如何工作的。

我有以下 TypeScript 代码：

加载模块

export interface ILoadable
{
    isLoading : boolean;
    isLoaded : boolean;
    loadingMessage : string;
    errorMessage : string;
}

export class LoadingController implements ILoadable
{
    //  Constructor

    constructor( private service? : ILoadable )
    {
    }

    //  Properties

    public get isLoading() : boolean
    {
        return this.service ? this.service.isLoading : true;
    }

    public get isLoaded() : boolean
    {
        return this.service ? this.service.isLoaded : false;
    }

    public get loadingMessage() : string
    {
        return this.service ? this.service.loadingMessage : "Loading...";
    }

    public get errorMessage() : string
    {
        return this.service ? this.service.errorMessage : "There was a fault.";
    }

}

应用

app.config( ($routeProvider) => {
$routeProvider
    .when( '/albums', { templateUrl: './pages/albums.html' } )
    .when( '/album', { templateUrl: './pages/album.html' } )
    .when( '/pictures', { templateUrl: './pages/pictures.html' } )
    .when( '/loggingIn', { templateUrl: './pages/loading.html', controller : "loginController" } )
    .when( '/loadingAlbums', { templateUrl: './pages/loading.html', controller : "loadingAlbumsController" } )
    .when( '/404', { templateUrl: './pages/404.html' } )
    .otherwise( { redirectTo: '/loggingIn' } )
});
app.controller( "loginController", [ "authenticator", Picasa.LoadingController ] );
app.controller( "loadingAlbumsController", [ Picasa.LoadingController ] );

Loading.html

<div ng-controller="loginController as loadable">{{loadable.loadingMessage}}</div>

这一切都很好，但我总是将 loginController 传递到 html 页面。这显然是因为我在 html 页面中引用了它，所以这覆盖了我在路由提供程序设置中指定控制器。

我的问题是我可以在 html 页面中使用“controller as”设置来注入不同的控制器吗？ 我希望 html 页面设置与 ILoadable 一起使用。 我不想将 $scope 注入我的控制器并在其上设置属性。

理想情况下，我可以将服务直接注入 html 页面，这样我就不必拥有控制器包装器。

非常感谢

Answer 1

您可以使用controllerAs 语法进行路由：

$routeProvider
    .when( '/loggingIn', { templateUrl: './pages/loading.html', controller : "loginController", controllerAs: 'login' } )

您的Index.html 应该有ng-view=""，这是视图将被替换的地方。

这将使您能够在视图中执行{{login.message}}。