$scope在Angular JS函数中没有绑定

$scope not binding inside function in Angular JS

本文关键字：绑定 函数 JS scope Angular      更新时间：2023-09-26

我正在使用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函数中的其他参数没有获得值。调试器声明它们是未定义的。我是角的新手。我想知道我是否在代码中遗漏了什么。此外，我试图将$scope传递给函数作为$scope.post = function ($scope){....，但它向我大喊"$scope未定义"。

正如我在评论中提到的，你应该总是在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指令中使用点?

您确实没有在代码的$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="post(data)"
相关文章：