David_Garcia David_Garcia - 3 months ago 8
Ajax Question

Doesn't send the $scope to the html

I started to work in Angular few days ago, and I have a problem that I don't know how to fix.
My website is calling a controller.js and this controller calls to an ajax function. The ajax function sent back a correct response, but I can't see it in the web. Here is the code:

var myApp = angular.module('myapp',[]);
myApp.controller('ResolveProduct', ['$scope', function($scope) {
productInformation = function($scope) {
var something;
$.ajax({
type: "GET",
dataType : "json",
async : true,
url : "/ajax/reference/200-B2",
success : function(data) {
something = data.david;
alert(JSON.stringify(something));
$scope.helper = JSON.stringify(something);
},
complete : function($scope) {
$scope.helper = JSON.stringify(something);
alert($scope.helper);
}
});
};
}]);


This sent me a correct answer, but when I do this in the HTML I don't see the answer. (Even if the alert has all the info)

<div ng-controller="ResolveProduct">
<input ng-model="info"></input> information is: {{ $scope.helper }}

<input type="button" id="commitAction" class="slim-button" value="Resolve" onclick="productInformation('')"/>
</div>

Answer

You don't need to call $scope in the html side, so change {{$scope.helper}} to {{helper}}

<div ng-controller="ResolveProduct">
                <input ng-model="info"></input> information is: {{ helper }}

                <input type="button" id="commitAction" class="slim-button" value="Resolve"  onclick="productInformation('')"/>
            </div>

Update

You have passed empty values to the $scope from the onclick="productInformation('')" method. So the $scope values are cleared .


Please copy and past my code instead of your code.

Js code

var myApp = angular.module('myapp',[]);
myApp.controller('ResolveProduct', ['$scope', function($scope) {
    $scope.productInformation = function() 
          { 
              var something;
                  $.ajax({
                  type: "GET",
                  dataType : "json",
                  async : true,
                  url : "/ajax/reference/200-B2",
              success : function(data){

                  something = data.david;
                  alert(JSON.stringify(something));
                  $scope.helper = JSON.stringify(something);

              },
              complete : function($scope){
                  $scope.helper = JSON.stringify(something);
                  alert($scope.helper);
              }
          });

          };
}]);

Html Code

<div ng-controller="ResolveProduct">
                    <input ng-model="info"></input> information is: {{ helper }}

                    <input type="button" id="commitAction" class="slim-button" value="Resolve"  **ng-click="productInformation()"**/>
                </div>

Also, I have changed onclick to ng-click in your button and assigned the function with $scope in your js side ( see the change productInformation to $scope.productInformation)