$scope 未绑定 Angular JS 中的内部函数

Question

我正在使用 ionic 框架并尝试向服务发出请求，但我无法将参数传递给函数。

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

由于某些原因 $scope.itsShaftLength 和 post 函数中的其他参数没有获取值。调试器声明它们未定义。我是 angular 的新手。我想知道我是否遗漏了代码中的某些内容。此外，我尝试将 $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

从这里开始进一步阅读，并确保阅读有关 angular 范围的内容

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

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-click 上：

ng-click="post(data)"

$scope 未绑定 Angular JS 中的内部函数

$scope not binding inside function in Angular JS

javascript

cross-platform

angularjs

ionic-framework

ionic