$ scope未綁定Angular JS中的內部函數

Question

我正在使用離子框架，並試圖向服務提出要求，但我無法將參數傳遞給功能。

我的HTML（離子結構）如下：

<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>

和我的JS文件：

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

由於某些原因，post函數內部的$scope.itsShaftLength和其他參數未獲取值。 調試器指出它們是未定義的。 我是新手。 我想知道我是否錯過了代碼中的某些內容。 此外，我嘗試將$ scope作為$scope.post = function ($scope){....傳遞給函數，但是它對我$scope.post = function ($scope){.... ，說“ $ scope not defined”。 任何幫助表示贊賞。

Answer 1

正如我的評論中所提到的，您應該始終在ng-model使用對象，因為在子作用域中原語的綁定被打破了。

一般經驗法則： ng-model中總是有一個點

嘗試將所有ng-model更改為具有對象前綴和點

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

在控制器中定義該對象：

$scope.formData={};

由於所有表單數據已經包含在一個對象中，因此這也簡化了需要作為參數發送的內容：

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

從這里開始進一步閱讀，並確保閱讀有關角度范圍的信息

為什么AngularJS文檔在model指令中不使用點？

Answer 2

您確實沒有在代碼的$ scope中定義ng-models。 您可以執行以下操作：

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

在您的html中，您定義了所有輸入ng-model：

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

然后在ng上單擊：

ng-click="post(data)"