$scope not binding inside function in Angular JS

Question

I am using ionic framework and am trying to make a request to a service but I am not able to pass the params to the function.

My Html (ionic structure) is as follows:

<ion-view view-title="Service Factor" ng-controller="beamdeflectionCtrl">
     <ion-content>
         <div class="item">
             <form novalidate class="col-lg-2">
                 <div class="list">
                     <label class="item item-input item-stacked-label">
                         <span class="input-label">Shaft Length</span>
                         <input type="number" name="itsShaftLength" placeholder="1212" ng-model="itsShaftLength">
                     </label>
                     <label class="item item-input item-stacked-label">
                         <span class="input-label">Running Load</span>
                         <input type="number" placeholder="1212" ng-model="itsRunningLoad">
                     </label>
                     <label class="item item-input item-stacked-label">
                         <span class="input-label">Area Moment Of Inertia</span>
                         <input type="number" placeholder="1212"
                                   ng-model="itsAreaMomentOfInertia">
                     </label>
                     <label class="item item-input item-stacked-label">
                         <span class="input-label">Modulus Of Elasticity</span>
                         <input type="number" placeholder="1212"
                                   ng-model="itsModulusOfElasticity">
                     </label>
                 </div>
                 <div class="form-group">
                     <button class="btn btn-success btn-lg" ng-click="post()">Get Beam Defection</button>
                 </div>
             </form>
         </div>
     </ion-content>
 </ion-view>

And my JS file:

angular.module('beamdeflection', [])
    .controller('beamdeflectionCtrl', beamdeflectionCtrl,['$scope']);

function beamdeflectionCtrl($stateParams, $scope, $http, $ionicPopup) {
    $scope.post = function () {
        $http({
            url: "/myurl",
            method: "GET",
            params: {
                shaftLength: $scope.itsShaftLength,//I am not getting this value
                runningLoad:$scope.itsRunningLoad,//I am not getting this value
                areaMomentOfInertia: $scope.itsAreaMomentOfInertia,//I am not getting this value
                modulusOfElasticity:$scope.itsModulusOfElasticity//I am not getting this value
            }}).success(function (data, status, headers, config) {
                $ionicPopup.alert({
                    title: 'Beam Deflection Calculated',
                    template: data
                });
                $scope.data = data;
            }).error(function (data, status, headers, config) {
                $ionicPopup.alert({
                    title: 'Beam Deflection Failed',
                    template: data
                });
            });
        };
    };
}

For some reason $scope.itsShaftLength and other params inside the post function are not getting values. The debugger states that they are undefined. I am new to angular. I wonder if I missed something in my code. Moreover, I tried passing $scope to the function as $scope.post = function ($scope){.... but it yells at me saying "$scope not defined". Any help is appreciated.

okay i am a Little confused the data from the success function should contain the information you want to show in the ionic alert right? 2nd thing i noticed i dont think you can pass the return Data to the alert you can only use template with a string and templateUrl for a html file or smth so id suggest var string = data.something and then pass the string in the template — stackg91
– stackg91, Commented Jul 15, 2015 at 13:51
@stackg91 Yes it is. However, I am not giving the service proper data (but bunch of unknowns) and it is bombing out. — Dinesh Devkota
– Dinesh Devkota, Commented Jul 15, 2015 at 13:52
doesn't make sense that $scope.post is making a GET request — charlietfl
– charlietfl, Commented Jul 15, 2015 at 13:53
not sure if this is the reason but don't your input field need "name"? i see that not all of them have it — GY22
– GY22, Commented Jul 15, 2015 at 13:54
also...always use a dot in ng-model to take advantage of inheritance. Since you are using primitives likely getting lost in child scopes — charlietfl
– charlietfl, Commented Jul 15, 2015 at 13:55

Community · Accepted Answer · 2017-05-23 12:14:03Z

2

As mentioned in my comment you should always use objects in ng-model since binding of primitives gets broken in child scopes.

General rule of thumb: always have a dot in ng-model

Try changing all the ng-model to have an object prefix and a dot

<input ng-model="formData.itsModulusOfElasticity">

In controller define that object:

$scope.formData={};

This also simplifies what you need to send as params since all the form data is already contained in one object:

 params: angular.copy($scope.formData) // using "copy" strips out any angular properties

Start here for further reading and make sure to read about angular scopes

Why don't the AngularJS docs use a dot in the model directive?

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jul 15, 2015 at 14:03

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

7 Comments

Dinesh Devkota Over a year ago

Well, I was able to pass values now. Is there way to Isolate each params values from formData?. Server didn't really like it. I am saying so because once I initialized the values and it works with it.

charlietfl Over a year ago

note minor change I added with angular copy. Be more specific about server doesn't take it. Inspect actual request in browser dev tools to see what is sent

Dinesh Devkota Over a year ago

I meant when I sent them as params( after initializing it for testing) with each shaftLength, runningLoad,areaMomentOfInertia and modulusOfElasticity separated and not as whole formData object and that works fine.

charlietfl Over a year ago

that doesn't explain the problem...did you inspect the actual request in network tab to see what was sent?

Dinesh Devkota Over a year ago

Yes, I did. It makes URL request by concatenating the parameters in URL and that is not allowed in back-end.

|

Paulo Gabriel · Accepted Answer · 2015-07-15 14:08:43Z

1

You really not define your ng-models in $scope on your code. You can do something like this:

 $scope.post = function (data) {
    $http({
        url: "/myurl",
        method: "GET",
        params: {
            shaftLength: data.itsShaftLength,
            runningLoad: data.itsRunningLoad,
            areaMomentOfInertia: data.itsAreaMomentOfInertia,
            modulusOfElasticity: data.itsModulusOfElasticity            }})... more code...

In your html you define at all inputs ng-model:

<input type="number" name="itsShaftLength" placeholder="1212" ng-model="data.itsShaftLength"> ...

And on ng-click:

ng-click="post(data)"

answered Jul 15, 2015 at 14:08

Paulo Gabriel

574 bronze badges

2 Comments

Dinesh Devkota Over a year ago

Alrighty. This works. I was missing to use dot notation and tried passing $scope rather than object itself. Thank you.

Paulo Gabriel Over a year ago

You're Welcome. I recommend to you take some time to read AngularJs and Ionic docs (and they are pretty easy to learn).

Collectives™ on Stack Overflow

$scope not binding inside function in Angular JS

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related