AngularJS控制器无法获取ng-model输入值问题求助

嘿，我来帮你搞定这个问题！你遇到的$scope.Data.idval或$scope.idval返回undefined的情况，核心原因很明确——你没有在控制器里提前初始化$scope.Data对象。

为什么会出现这个问题？ #

AngularJS的双向绑定机制依赖于作用域上已存在的对象/属性。当你在模板里写ng-model="Data.idval"时，如果$scope.Data根本不存在，Angular没办法自动帮你创建这个对象，自然就拿不到它的idval属性，结果就是undefined。

具体修复步骤 #

1. 先在控制器里初始化$scope.Data对象
   这是最关键的一步，你需要在控制器开头就定义好这个对象，甚至可以直接给它赋默认值（替代输入框的value="1"，更符合Angular的写法）：

   app.controller('Controller', function($scope, $http){
     // 初始化Data对象，一定要写在方法外面！
     $scope.Data = {
       idval: 1 // 直接在这里设置默认值，输入框会自动渲染这个值
     };
     
     $scope.fetchvalue = function(){
       var id = $scope.Data.idval;
       console.log(id); // 现在能正常拿到值了
       alert(id);
     }
   });
   

2. 确保控制器与模板正确关联
   别忘了在输入框所在的DOM元素上添加ng-controller="Controller"指令，不然控制器的作用域覆盖不到这个输入框，也会导致拿不到值：

   <div ng-controller="Controller">
     <input type="text" name="idval" ng-model="Data.idval">
     <!-- 比如加个按钮触发fetchvalue方法 -->
     <button ng-click="fetchvalue()">获取输入框值</button>
   </div>
   

额外小提示 #

• 尽量避免直接用ng-model="idval"这种无嵌套的属性，容易因为Angular的原型继承机制出现绑定失效的问题，像你现在用Data.idval这种嵌套对象的写法是更推荐的，只要记得初始化对象就行。
• 输入框的value="1"可以去掉，直接在控制器里给$scope.Data.idval赋值，这样双向绑定会自动同步到输入框，更符合MVVM的思想。

内容的提问来源于stack exchange，提问作者Rye