1

私は AngularJS と TypeScript を学んでおり、非常に基本的なアプリケーションを構築して自分自身を動かしています。

要素ディレクティブをページにロードするアプリケーションは非常に単純ですが、ディレクティブ フックをロードしようとすると、「Uncaught TypeError: null のプロパティ 'directive' を読み取れません」というエラーが発生し続けます。

これが発生する理由は理解していますが、インターネット上でこれを修正する方法に関する情報を見つけることができません。

参照用の TS:

app.ts

namespace playground.core
{
    "use strict";

    export let playgroundApp: ng.IModule = angular.module("playgroundApp", []);
    export let compileProvider: ng.ICompileProvider = null;

    playgroundApp.config(($compileProvider: ng.ICompileProvider, $controllerProvider: ng.IControllerProvider) => {
        (<any>$controllerProvider).allowGlobals();
        compileProvider = $compileProvider;
    }); 

    angular.element(document).ready(() => { angular.bootstrap(document, ["playgroundApp"]); });
}

PlaygroundController.ts

namespace playground.controllers
{
    "use strict";
    export interface IPlaygroundScope extends ng.IScope
    {

    }

    export class PlaygroundController
    {
        static $inject: string[] = ["$scope", "$element"];

        private scope: IPlaygroundScope;

        constructor($scope: IPlaygroundScope, $element: ng.IRootElementService)
        {
            this.scope = $scope;
        }
    }
}

ディレクティブ.ts

namespace playground.directives
{
    "use strict";

    export interface ILoaderScope extends ng.IScope
    {

    }

    export class LoaderDirective
    {
        private scope: ILoaderScope;

        constructor($scope: ILoaderScope, $rootElement: ng.IRootElementService, $attributes: ng.IAttributes, $compile: ng.ICompileService)
        {
            this.scope = $scope;
        }
    }

    playground.core.compileProvider.directive.apply(null, ["loader", ["$compile", ($compile: ng.ICompileService) =>
    {
        return {
            restrict: "E",
            replace: true,
            templateUrl: "template.html",
            scope: {

            },
            link: ($scope: ILoaderScope, $rootElement: ng.IRootElementService, $attributes: ng.IAttributes) =>
            {
                return new LoaderDirective($scope, $rootElement, $attributes, $compile);
            }
        };
    }]]);
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="App_Themes/Designer/designer.css" rel="stylesheet" />
</head>
<body data-ng-controller="playground.controllers.PlaygroundController">

    <div k2-loader=""></div>

    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/angular.min.js"></script>    
    <script src="scripts/go-debug.js"></script>

    <script src="core/app.js"></script>
    <script src="controllers/PlaygroundController.js"></script>
    <script src="directives/loader/directive.js"></script>

    <script type="text/javascript">

        "use strict";        

    </script>
</body>
</html>

ディレクティブが既にロードされた後にのみ呼び出されるplaygroundApp.config(...)に遅延があるように見えるため、例外はdirective.tsでスローされます: ground.core.compileProvider.directive.apply ...。

ディレクティブ呼び出しをsetTimeout(...)でラップすることなく、このシナリオを機能させる方法はありますか?

アップデート：

そのため、他に解決策がないように思われるため、ディレクティブ部分をチェックでラップし、とにかく setTimeout を使用することになりました。

namespace playground.directives
{
    "use strict";

    export interface ILoaderScope extends ng.IScope
    {

    }

    export class LoaderDirective
    {
        private scope: ILoaderScope;

        constructor($scope: ILoaderScope, $rootElement: ng.IRootElementService, $attributes: ng.IAttributes, $compile: ng.ICompileService)
        {
            console.log("constructor");
            this.scope = $scope;
        }
    }

    let load = (): void =>
    {
        if (playground.core && playground.core.appCompileProvider)
        {
            playground.core.appCompileProvider.directive.apply(null, ["loader", ["$compile", ($compile: ng.ICompileService): ng.IDirective =>
            {
                return <ng.IDirective>{
                    restrict: "E",                  
                    templateUrl: "directives/loader/template.html",
                    scope: {
                    },
                    link: ($scope: ILoaderScope, $rootElement: ng.IRootElementService, $attributes: ng.IAttributes): LoaderDirective =>
                    {
                        return new LoaderDirective($scope, $rootElement, $attributes, $compile);
                    }
                };
            }]]);
        }
        else
        {
            setTimeout(load);
        }
    };

    load();
}
4

1 に答える 1