Question

当我运行我的应用程序时，模型绑定有效。但是，在调用我的service post方法并将this.payload的值设置为response.data的值并调用bind之后，我的视图不再显示任何模型数据。控制器和服务的相应消息属性仅显示有效负载对象。

是否有明显的范围与我缺少？

app.js

 "use strict";

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

PayrollPredictController.js

        "use strict";

payrollPredictApp.controller('PayrollPredictController', ['AppModel', function (AppModel) {

    var self = this;

    self.message = "test message.";

    self.model = AppModel;

}]);

PayrollPredictService.js

    "use strict";

payrollPredictApp.service('AppModel', function ($http) {

    var service = this;

    service.payload = {
        "Settings": {
            "employeeBenefitCost": 1000,
            "dependentBenefitCost": 500,
            "payPerPeriod": 2000,
            "numberOfPayPeriods": 26
        },
        "Employee": {
            "FirstName": "",
            "LastName": "",
            "Dependents": []
        }
    };

    service.message = "service message.";

    service.addDependent = function () {
        service.payload.Employee.Dependents.push({ "FirstName": '', "LastName": '' });
    };

    service.makePrediction = function () {

        $http.post('http://localhost:59045/api/payrollpredict/executeprediction', service.payload)
             .then(
                function (response) {
                    service.payload = response.data;
                }.bind(service),

                function (response) {
                    console.log('Error occurred.');
                }
             );
    };
});

视图的一部分

<body ng-controller="PayrollPredictController as payrollPredict">

<div>
    <h1>Payroll Predict</h1>
</div>    

<div>
    <p>{{ payrollPredict.message }}</p>
    <p>{{ payrollPredict.model.message }}</p>
    <p>{{ payrollPredict.model.payload.Employee.FirstName }}</p>
    <p>{{ payrollPredict.model.payload.Employee.LastName }}</p>
</div>

角度控制器作为范围问题

0 个答案: