angularjs data is not adding to service

Question

I am using angularjs and ajax. I want to get the data from the webservice pass to controller. For passing the value to controller i am using holder (It's a factory method or service). It is working without webservice. But when i am calling data from web the data is getting correct but it is not updating to holder. My code is given below. When clicking the button "data1". I want to print the data from webservice in button name data2. It's not showing any error. And successfully data showing data in console but not adding data to holder.

index.html

<!DOCTYPE html>
<html ng-app="sharing">
<head>
<script data-require="[email protected]" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
    <script src="script.js"></script>
</head>

<body>
<div ng-controller="ChildCtrl">
  <button ng-click="increment() name="data1">+</button>{{Holder.value}}
</div>

<div ng-controller="ChildCtrl2">
  <h2>Second controller</h2>
  <button ng-click="increment() name="data2">+</button>{{Holder.value}}
  <button ng-click="" name="data3">+</button>{{Holder.name}}
</div>
</body>
</html>

script.js

// Code goes here
var app = angular.module('sharing', []);
var root="http://xxx.xxx.x.xx:60/Api";

app.factory('Holder', function() {
    return {
    value: 0,
    name:""
    };
});

app.controller('ChildCtrl', function($scope, Holder) {
$scope.Holder = Holder;
$scope.increment = function() {
$scope.Holder.value++;


var jData1 = {};
jData1.BDMeetingId ="10003/2017";

var k=null;
console.log(JSON.stringify(jData1));
$.ajax({
    type: "POST",
    async: true,
    url: root+"/Boardmeeting/BoardmeetingDetailsSevice",
    data: JSON.stringify(jData1),
    contentType: "text/plain",
    dataType: "json",
    crossDomain: true,
    success: function (msg) {
     k=msg;
     $scope.BMNo=k.BMNo;
    console.log(msg);
    $scope.Holder.name=$scope.BMNo;
  },
  error: function (jqXHR, textStatus, errorThrown) {       
  },
});

};
});

app.controller('ChildCtrl2', function($scope, Holder) {
$scope.Holder = Holder;
$scope.increment = function() {
$scope.Holder.value++;
};
});

marc_s · Accepted Answer · 2018-02-18 19:21:53Z

1

if you are using angularjs so please avoid to use jQuery code please remove $.ajax and use $http or $resource its angularjs inbuilt provider.

for more details. https://docs.angularjs.org/api/ng/service/$http https://docs.angularjs.org/api/ngResource/service/$resource

edited Feb 18, 2018 at 19:21

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jan 9, 2018 at 13:54

Pankaj Rupapara

7904 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joe · Accepted Answer · 2018-01-09 14:35:01Z

I have got the answer when using the angularjs webservice instead of ajax webservice.

script.js

var app = angular.module('sharing', []);
var root="http://xxx.xxx.x.xx:60/Api";
app.factory('Holder', function() {
    return {
        value: 0,
        name:""
    };
});

app.controller('ChildCtrl', function($scope, Holder, $http) {

    $scope.Holder = Holder;
    $scope.increment = function() {
    $scope.Holder.value++;


    var jData1 = {};
    jData1.BDMeetingId ="10003/2017";

    console.log(JSON.stringify(jData1));
    $http({
        method: 'POST',
        url: root+"/Boardmeeting/BoardmeetingDetailsSevice",
        headers: {
            'Content-Type': 'text/plain', /*or whatever type is relevant */
            'Accept': 'application/json' /* ditto */
        },
        data: JSON.stringify(jData1)
    }).then(function(response) {
            console.log(response);
    var k=response;
    $scope.BMNo=k.BMNo;
    console.log(response.data.BMNo);
    $scope.Holder.name=response.data.BMNo;

}, 
function(response) { // optional
        // failed
});

};
});

app.controller('ChildCtrl2', function($scope, Holder) {
$scope.Holder = Holder;
$scope.increment = function() {
$scope.Holder.value++;
};
});

Collectives™ on Stack Overflow

angularjs data is not adding to service

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related