永远不会调用我的Controller构造函数(AngularJS)

时间:2014-05-22 16:38:58

标签: javascript angularjs typescript

我在Sharepoint Web部件中设置了一个小的angularjs应用程序。这是第一次这样做,但是在做正确的代码之前我在这个设置中做了一个演示工作。我现在的问题是,我认为所有内容都已正确连接,但Controller构造函数从未被调用过?我知道代码不完整,但至少我应该进入构造函数并调用服务。我看到的唯一警报是App文件中的警报。以下是不同的文件:

HTML:

<div id="bidragsoplysninger2015App">
<div data-ng-controller="bidragsoplysninger2015Controller">
    <div id="template-content" ng-include="'/AngularJS/Views/Bidragsoplysninger2015.html'"></div>
</div>

部分:

<ul>
    <li data-ng-repeat="indbetaling in indbetalinger | orderBy:'registreringsdato'">{{indbetaling.registreringsdato}} - {{indbetaling.beloeb}}</li>
</ul>

型号:

class Indbetaling {
constructor(
    public beloeb: number,
    public betalingsform: string,
    public fagkode: string,
    public indskudstype: string,
    public institutionsNr: string,
    public kundeNr: number,
    public ordningNr: number,
    public pensionsform: string,
    public pensionsmodel: string,
    public registreringsdato: Date,
    public valoerMaaned: string
) {}

}

接口:

interface IIndbetalinger {
getIndbetalinger(cpr: string): Indbetaling[]

}

服务:

class Bidragsoplysninger2015Service implements IIndbetalinger
{
private scope: any;
private http: any;

constructor($scope: ng.IScope, $http: ng.IHttpService) {
    this.scope = $scope;
    this.http = $http;
}

getIndbetalinger(cpr: string): Indbetaling[]
{
    var promise = this.http.get('/_layouts/wpgenerelportal/Indbetalinger.aspx/GetIndbetalinger?cpr=' + cpr);
    promise = promise.then(this.mapIndbetalinger).then(response => response.data);
    return promise;
}

mapIndbetalinger(data) {
    alert("Mapping!");
}

}

控制器:

class Bidragsoplysninger2015Controller {
private indbetalinger: Indbetaling[];

public static $inject = [
    '$scope',
    'bidragsoplysninger2015Service'
];

constructor(private $scope, private bidragsoplysninger2015Service: IIndbetalinger) {
    alert("Controller constructor");
    this.indbetalinger = $scope.indbetalinger = bidragsoplysninger2015Service.getIndbetalinger("110680-3419");

    // 'vm' stands for 'view model'. We're adding a reference to the controller to the scope
    // for its methods to be accessible from view / HTML
    $scope.vm = this;
}

}

应用:

alert("In app 1");

var bidragsoplysninger2015AppModule = angular.module('bidragsoplysninger2015App', []); 

bidragsoplysninger2015AppModule.service("bidragsoplysninger2015Service", Bidragsoplysninger2015Service);
bidragsoplysninger2015AppModule.controller("bidragsoplysninger2015Controller", Bidragsoplysninger2015Controller);

alert("In app 2");

$(document).ready(() => {
    alert("In app 3");
    angular.bootstrap($("#bidragsoplysninger2015App"), ['bidragsoplysninger2015App']);
});

1 个答案:

答案 0 :(得分:0)

我在这篇文章中发现了这个问题:'unknown provider error' in Angular app

句子:“服务没有范围”是关键。一旦我将$ scope作为服务构造函数的输入参数删除,一切正常。