1
私はAngularJSとTypeScriptを学習しており、自分自身を動かすための非常に基本的なアプリケーションを構築しました。AngularJS 1.5設定遅延
要素指向をページにロードするアプリケーションは非常に簡単ですが、エラーが発生します。「キャッチされていないTypeError：ディレクティブフックをロードしようとすると、nullのプロパティ 'ディレクティブ'を読み取れません。
私はこれがなぜ起こるのか理解していますが、これを修正する方法に関するインターネット上の情報はありません。
参照用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;
}
}
}
directive.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>
例外がdirective.tsにスローされます。playground.core.compileProviderを.directive.apply ... playgroundAppに遅延があるように思われるので、 .config（...）は、ディレクティブが既にロードされた後にのみ呼び出されます。
の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();
}
これはおかげで、残念ながら遅延が続く。私が読んだことから、これはちょうど設定が動作する方法です – JadedEric
それは変です... –