Javascript AngularJS 1.5配置延迟_Javascript_Angularjs_Delayed Execution_Typescript1.8_Angularjs Config

Javascript AngularJS 1.5配置延迟

javascript angularjs

Javascript AngularJS 1.5配置延迟,javascript,angularjs,delayed-execution,typescript1.8,angularjs-config,Javascript,Angularjs,Delayed Execution,Typescript1.8,Angularjs Config,我正在学习AngularJS和TypeScript，并构建了一个非常基本的应用程序来让自己开始工作一个将元素指令加载到页面上的应用程序，非常简单，但我一直遇到一个错误：“UncaughtTypeError:在尝试加载指令挂钩时无法读取null的属性'directive' 我理解为什么会发生这种情况，但我在互联网上找不到任何关于如何解决这一问题的信息供参考的TS：应用程序ts namespace playground.core { "use strict"; export

我正在学习AngularJS和TypeScript，并构建了一个非常基本的应用程序来让自己开始工作

一个将元素指令加载到页面上的应用程序，非常简单，但我一直遇到一个错误：“UncaughtTypeError:在尝试加载指令挂钩时无法读取null的属性'directive'

我理解为什么会发生这种情况，但我在互联网上找不到任何关于如何解决这一问题的信息

供参考的TS：

应用程序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"]); });
}

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;
        }
    }
}

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);
            }
        };
    }]]);
}

指令.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"]); });
}

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;
        }
    }
}

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:playway.core.compileProviderdirective.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();
}

namespace.directions
{
“严格使用”；
导出接口ILoaderScope扩展了ng.isScope
{
}
导出类LoaderDirective
{
私有范围：ILoaderScope；
构造函数（$scope:ILoaderScope，$rootElement:ng.IRootElementService，$attributes:ng.IAttributes，$compile:ng.ICompileService）
{
console.log（“构造函数”）；
this.scope=$scope；
}
}
让load=（）：void=>
{
if（playerly.core&&playerly.core.appCompileProvider）
{
apply（null，[“加载程序”，[“$compile”，（$compile:ng.ICompileService）：ng.IDirective=>
{
返回{
限制：“E”，
templateUrl:“指令/loader/template.html”，
范围：{
},
链接：（$scope:ILoaderScope，$rootElement:ng.IRootElementService，$attributes:ng.IAttributes）：LoaderDirective=>
{
返回新的LoaderDirective（$scope、$rootElement、$attributes、$compile）；
}
};
}]]);
}
其他的
{
设置超时（加载）；
}
};
加载（）；
}

试试这个

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"]);
}

namespace.core
{
“严格使用”；
导出let playgroundApp:ng.IModule=angular.module（“playgroundApp”，[]）；
导出let compileProvider:ng.ICompileProvider=null；
playgroundApp.config（$compileProvider:ng.ICompileProvider，$controllerProvider:ng.IControllerProvider）=>{
（$controllerProvider）.allowGlobals（）；
compileProvider=$compileProvider；
}); 
引导（文档，[“playgroundApp”]）；
}

您不应该依赖文档加载来引导。也许，这会推迟进程。

试试这个

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"]);
}

namespace.core
{
“严格使用”；
导出let playgroundApp:ng.IModule=angular.module（“playgroundApp”，[]）；
导出let compileProvider:ng.ICompileProvider=null；
playgroundApp.config（$compileProvider:ng.ICompileProvider，$controllerProvider:ng.IControllerProvider）=>{
（$controllerProvider）.allowGlobals（）；
compileProvider=$compileProvider；
}); 
引导（文档，[“playgroundApp”]）；
}

您不应该依赖文档加载来引导。也许，这会耽误整个过程。

谢谢你这么做，不幸的是，耽搁一直存在。从我所读到的内容来看，这正是配置工作的方式。谢谢，不幸的是，延迟仍然存在。据我所知，这就是配置的工作方式