ng-model 在控制器中未定义

Posted 2023-02-22

【中文标题】ng-model 在控制器中未定义

【英文标题】：ng-model is undefined in controller

【发布时间】：2015-11-06 10:40:31

【问题描述】：

我正在使用 ionic，我有以下观点：

<ion-view hide-nav-bar="true" ng-controller="loginController" class="login-view">
  <ion-content class="padding">

    <div class="row row-center">
      <div class="col">

        <div id="logo"></div>

        <form>
          <div class="list">
            <label class="item item-input">
              <input type="text" placeholder="Membership No" ng-model="membershipNo">
            </label>
            <label class="item item-input">
              <input type="password" placeholder="Password" ng-model="password">
            </label>
          </div>

          <button class="button button-block button-positive button-login" ng-click="login()">
            Login
          </button>
        </form>

      </div>
    </div>

  </ion-content>
</ion-view>

还有我的控制器：

app.controller('loginController', ['$scope', '$localstorage',
    function($scope, $localstorage) 

        $scope.membershipNo;
        $scope.password;

        $scope.login = function () 
            console.log("User logged in with membership no: " + $scope.membershipNo +
    "\n and password: " + $scope.password);
        

    
]);

我不明白的是，当我单击按钮时，登录功能被正确调用。此外，如果我在控制器中将$scope.membershipNo 设置为“香蕉煎饼”之类的内容，则视图实际上会更新。

然而，当登录功能实际运行时，说membershipNo 和password 是未定义的。我对 Angular 和 Ionic 还很陌生，所以我知道这可能是一些 n00b 错误......

【问题讨论】：

您正在绑定到一个原语。不要那样做。 codelord.net/2014/05/10/…（本质上，membershipNo 的值是按值传递的，所以改变的不是控制器中的引用。创建一个对象，类似于 $scope.user = 并传递 ng-model="user.membershipNo"，否则 Angular 无法发送数据传回控制器...）

Ng-model does not update controller value的可能重复

@DRobinson 说了什么。您可以通过使用 controllerAs 语法来避免这种情况，同时使您的代码在此过程中更加优雅和面向未来:-)

@Rahil 只有在 ngController 和 ngModel 之间没有创建新范围时才有效。这是非常糟糕的做法。你真的想要你的ngModel 中的“点”，每次。 总是。 ***.com/a/17186640/624590（它也不适用于 Dean，因为 ionContent 创建了一个范围。）

我小时候曾经拥有过一台望远镜，但它从来没有真正能看得很远。虽然站在我的房间里看起来确实很酷。

【参考方案1】：

我最近遇到了完全相同的问题，这可能是一个解决方案： https://***.com/a/22768720/552936

修改后的引用：

“如果你使用 ng-model，你必须有一个点。” 让你的模型指向一个object.property，你会很高兴的。

控制器

$scope.formData = ;
$scope.login = function () 
  console.log("User logged in with membership no: " + $scope.formData.membershipNo +
  "\n and password: " + $scope.formData.password);
 

模板

<input type="text" placeholder="Membership No" ng-model="formData.membershipNo">
<input type="password" placeholder="Password" ng-model="formData.password">

【讨论】：

虽然这将解决问题，但它并没有真正提供为什么它首先失败的答案。

就像@DRobinson 说的和你上面的例子一样，我把membershipNo 和password 包装在一个'credentials' 对象中，现在神奇地一切正常......但是为什么！？

我也很好奇这是为什么。我还有其他可以正常工作的变量不在对象中

【参考方案2】：

请检查此代码这对我有用：

<div class="row row-center">
  <div class="col">

    <div id="logo"></div>

    <form>
      <div class="list">
        <label class="item item-input">
          <input type="text" placeholder="Membership No" ng-model="data.membershipNo">
        </label>
        <label class="item item-input">
          <input type="password" placeholder="Password" ng-model="data.password">
        </label>
      </div>

      <button class="button button-block button-positive button-login" ng-click="login()">
        Login
      </button>
    </form>

  </div>
</div>

在你的控制器中：

app.controller('loginController', ['$scope',
  function($scope) 
    $scope.data=;
  $scope.login = function () 
    console.log("User logged in with membership no: " + $scope.data.membershipNo +
    "\n and password: " + $scope.data.password);
  

]);

【参考方案3】：

您需要在控制器中像这样定义 $scope 变量：

$scope.membershipNo = '';
$scope.password = '';

所以你的控制器看起来像：

app.controller('loginController', ['$scope', '$localstorage',
  function($scope, $localstorage) 

  $scope.membershipNo = '';
  $scope.password = '';
  $scope.login = function () 
    console.log("User logged in with membership no: " + $scope.membershipNo +
    "\n and password: " + $scope.password);
  

]);

【讨论】：

我确实尝试过，然后该函数只打印出空白值，而不是用户输入的实际内容...？

【参考方案4】：

Hey Jean,Have a look of it your code is working here

       <ion-view ng-app="app" hide-nav-bar="true" ng-controller="loginController" class="login-view">
      <ion-content class="padding">

        <div class="row row-center">
          <div class="col">

            <div id="logo"></div>

            <form>
              <div class="list">
                <label class="item item-input">
                  <input type="text" placeholder="Membership No" ng-model="membershipNo">
                </label>
                <label class="item item-input">
                  <input type="password" placeholder="Password" ng-model="password">
                </label>
              </div>

              <button class="button button-block button-positive button-login" ng-click="login()">
                Login
              </button>
            </form>

          </div>
        </div>

      </ion-content>
    </ion-view> 


var app= angular.module("app",[]);
    app.controller('loginController', ['$scope', 
      function($scope, $localstorage) 

      $scope.membershipNo;
      $scope.password;
      $scope.login = function () 
        alert("User logged in with membership no: " + ($scope.membershipNo || '') +
        "\n and password: " + ($scope.password || ''));
      

    ]);

【讨论】：

您能否添加一个解释，帮助“提问者”了解您做了什么以及为什么 - 这样我们都可以从中学习

嗨 Ry8806，这是典型继承的概念。正如@mbajur 在他的例子中所做的那样，通过制作它的一个对象。 angularjs 使用的是 javascript 中的模式。如果您在代码中使用的层次结构（例如子范围和父范围之间的关系）得到了正确维护，那么应该没有问题。否则，您会在 angularjs 中遇到这些类型的问题，即丢失范围属性值。但是如果你能看到我只是做了一个简单的控制器，那么它就可以正常工作了。我不知道jean想要做什么。但在他添加的代码 sn-p 中没有问题。

【参考方案5】：

$scope.user = ;
$scope.submitForm = function (isValid) 
   if (($scope.user.name || '').length > 0) //Code