0

When I run my app the model binding works. However, after calling my service post method and setting the value of this.payload to the value of response.data and calling bind, my view no longer displays any of the model data. The controller's and the service's respective message properties display but nothing from the payload object.

Is there something obvious with scoping that I am missing?

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.');
                }
             );
    };
});

Part of View

<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>
chad
  • 564
  • 1
  • 4
  • 16
  • 3
    `this` inside a promise`success` callback is not `this` that you are assuming, store this in variable like `var self= this;` & use `self` instead of `this` to avoid such `scoping` issue – Pankaj Parkar Dec 31 '16 at 20:01
  • Always store reference to `this` and use that for any use within the service or controller See [John Papa Angular style guide](https://github.com/johnpapa/angular-styleguide/tree/master/a1#style-y032) – charlietfl Dec 31 '16 at 20:04
  • @PankajParkar, I tried that and it's exhibiting the exact same behavior. What am I doing wrong? – chad Dec 31 '16 at 20:32
  • 1
    No way, first read about what @charlietfl has suggested, then check your code.. you must have missed something.. or otherwise add fiddle or plunker with reproducible issue.. – Pankaj Parkar Dec 31 '16 at 20:33
  • @PankajParkar I've looked at the John Papa resource. I have updated the code. Is there anything obvious that you can see? It has to be something stupid that I am doing. – chad Dec 31 '16 at 20:37
  • you don't need to bind service, it is already available in the scope of the callback when you declare it above – charlietfl Dec 31 '16 at 20:39
  • @PankajParkar I am getting model is undefined. – chad Dec 31 '16 at 20:46
  • @chad my bad for last comment. keep this line `service.payload = response.data;` as is. then change `{{payrollPredict.model.payload.Employee.FirstName}}` to `payrollPredict.payload.Employee.FirstName` – Pankaj Parkar Dec 31 '16 at 20:49
  • @PankajParkar - TypeError: Cannot set property 'payload' of undefined. I don't get what I am doing wrong...obviously. – chad Dec 31 '16 at 20:49
  • @PankajParkar Ok, some of the issue came down to casing against my JSON model. I still need this dot notation, payrollPredict.model.payload.employee.firstName, but that capital E in employee and capital F in firstName was killing me. I had casing issues in my js as well and in my ng bindings. I can't thank you enough for your assistance. I am able to move forward now. Thank you! – chad Dec 31 '16 at 21:29

0 Answers0