[英]AngularJS 1.5 config delay
I am learning AngularJS and TypeScript and built a very basic application to get myself going. 我正在学习AngularJS和TypeScript,并构建了一个非常基本的应用程序来使自己前进。
An application, that loads a element-directive onto a page, very simple, but I keep hitting an error: "Uncaught TypeError: Cannot read property 'directive' of null" when trying to load the directive hook. 一个将元素指令加载到页面上的应用程序,非常简单,但我一直遇到错误:尝试加载指令钩子时出现“未捕获的TypeError:无法读取null的属性'directive'”。
I understand why this happens, but I cannot find any information on the internet on how to fix this. 我知道为什么会发生这种情况,但是我无法在互联网上找到有关如何解决此问题的任何信息。
The TS for reference: 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 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 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>
The exception is thrown in directive.ts: playground.core.compileProvider .directive.apply... because there seem to be a delay on playgroundApp.config(...) which only gets called after the directive has already been loaded. 唯一的例外是抛出directive.ts:playground.core.compileProvider .directive.apply -因为似乎是在playgroundApp.config(...),只有该指令已经被加载后,被称为延迟。
Is there a way to make this scenario work, without having to wrap the directive call in a setTimeout(...) ? 有没有一种方法可以使此方案工作而不必将指令调用包装在setTimeout(...)中 ?
Update: 更新:
So I ended up wrapping the directive portion in a check, and using setTimeout anyways, as there seems to be no other solution. 因此,我最终将指令部分包装在检查中,并仍然使用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();
}
try this, 尝试这个,
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.bootstrap(document, ["playgroundApp"]);
}
you shouldn't have to rely on document loading to bootstrap angular. 您不必依靠文档加载来引导角度。 perhaps, that's delaying the process.
也许,这延迟了该过程。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.