angularjs - Konvertera angular scope-variabel till stark typ


Jag vill kasta en Angular-scope-variabel till en typ:

Det kan se ut ungefär så här:

app.controller( 'PageLayoutController', function ( $scope )
{
    // Scope properties
    (PageMap)$scope.PageMap;

eller

app.controller( 'PageLayoutController', function ( $scope )
{
    // Scope properties
    $scope.PageMap: PageMap;

Är det möjligt eller måste jag deklarera en separat variabel?

var pageMap: PageMap;
$scope.PageMap = pageMap;

Det här är för typframåts skull.

Svar #1

Du kan göra det på detta sätt, skapa en typ som härstammar från IScope och lägg till dina egenskaper till den. Exempel:

 interface PageLayoutVM extends ng.IScope{
     PageMap : PageMap;
 }

och använd det

app.controller( 'PageLayoutController', function ( $scope:PageLayoutVM)

Du kommer att få ng.IScope endast om du har angular.d.ts-typdefinitioner använda i din applikation.

För att lägga till, med användningen av TypeScript är det mycket enklare att använda det med controllerAs-syntax och definiera egenskaper på själva controllern istället för att använda scope för att sätta egenskaper på vy-modellen.

Något som:

 export interface PageLayoutVM {
     PageMap : PageMap;
     someChangehandler:(val:string)=>void;
 }

 class PageLayoutController implements PageLayoutVM {

    PageMap : PageMap; //public is implicit

    static $inject = ['$scope', 'myService']; //Just for demo if you are using scope specific methods like watch
    constructor(private $scope:ng.IScope,
                private myService:IMyService){

    }

    someChangehandler(val:string){ //Another public method
        this.myService.doSomething(val);
    }

    private doSomePrivateStuff(){
        //Do stuff...
    }

 }

Med detta, när du skriver enhetstester för din kontroller, kan du skriva testet i TS själv med typdefinitionerna och det kommer vara lätt att slå upp kontrollerens egenskaper medan du skriver tester.

Svar #2

Idealiskt bör du definiera ett gränssnitt och deklarera $scope med det:

interface IPageLayoutScope extends ng.IScope {
    PageMap: PageMap;
}

app.controller( 'PageLayoutController', function ( $scope: IPageLayoutScope)

På det sättet kommer $scope.PageMap redan att vara definierad.