$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, Jul 15 '15 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, Jul 15 '15 at 13:52
doesn't make sense that `$scope.post` is making a GET request — charlietfl, Jul 15 '15 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, Jul 15 '15 at 13:54
@charlietfl yeah, a studip backend developer implemented it as get and params. — Dinesh Devkota, Jul 15 '15 at 13:54
well how the function is called is not important dont use data as template for ionic.alert — stackg91, Jul 15 '15 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, Jul 15 '15 at 13:55
als i believe your missing quotes in your params -> 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 }}). — GY22, Jul 15 '15 at 13:56
@GY22 quotes are optional for object keys that don't contain special characters. That is a non issue here — charlietfl, Jul 15 '15 at 13:57
@GY22 well that shouldn't matter. Just `$scope.itsShaftLength` is undefined that is the problem. — Dinesh Devkota, Jul 15 '15 at 13:58
@DineshDevkota, sorry if I am not very clear. also very new to angular. just wanted to help out. check this question i asked not so long ago -> http://stackoverflow.com/questions/31026997/saving-data-to-db-with-angularjs-and-php. maybe it will help you — GY22, Jul 15 '15 at 14:00

score 2 · Answer 1 · edited May 23 '17 at 12:14

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 '17 at 12:14

Community

1
1

answered Jul 15 '15 at 14:03

charlietfl

170,828
13
121
150

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. – Dinesh Devkota Jul 15 '15 at 14:09
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 – charlietfl Jul 15 '15 at 14:11
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. – Dinesh Devkota Jul 15 '15 at 14:13
that doesn't explain the problem...did you inspect the actual request in network tab to see what was sent? – charlietfl Jul 15 '15 at 14:15
Yes, I did. It makes URL request by concatenating the parameters in URL and that is not allowed in back-end. – Dinesh Devkota Jul 15 '15 at 14:18
but that's what a GET request does. Should really be using POST. SInce you selected other answer ...should follow up any further issues with them – charlietfl Jul 15 '15 at 14:22
you have an upvote from me. Very nicely answered. There is something weird going on in my backed. – Dinesh Devkota Jul 15 '15 at 14:27

score 1 · Accepted Answer · answered Jul 15 '15 at 14:08

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 '15 at 14:08

Paulo Gabriel

57
4

Alrighty. This works. I was missing to use dot notation and tried passing $scope rather than object itself. Thank you. – Dinesh Devkota Jul 15 '15 at 14:21
You're Welcome. I recommend to you take some time to read AngularJs and Ionic docs (and they are pretty easy to learn). – Paulo Gabriel Jul 15 '15 at 14:31

$scope not binding inside function in Angular JS

2 Answers2