$ 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)"