AngularJS 1.5配置延遲

我正在學習AngularJS和TypeScript，並構建了一個非常基本的應用程序來讓我自己去。AngularJS 1.5配置延遲

一個將元素指示加載到頁面上的應用程序非常簡單，但我一直打錯：「Uncaught 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(); 
}

來源

2016-03-30 JadedEric

試試這個，

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

你不應該依賴於文件加載到引導角。也許，這是推遲了這個過程。

來源

2016-03-30 10:13:55

感謝這一點，不幸的是延遲仍然存在。從我讀過的，這只是配置的工作方式 – JadedEric

這很奇怪... –

AngularJS 1.5配置延遲

回答

相關問題