如何在页面加载时获取 HTML 中的初始值到 Angularjs 中的控制器答案

【问题标题】：How to get the init value in HTML to contoller in Angularjs on page load如何在页面加载时获取 HTML 中的初始值到 Angularjs 中的控制器
【发布时间】：2015-08-31 16:36:09
【问题描述】：

<ul>                                                                
<li ng-init="formData.mdpSunday='5'">
<input ng-model="formData.mdpSunday" name="mdpSunday" type="radio" value="5">
</li>
</ul>


app.controller('doublePointCtrl', function ($rootScope, $scope, $http, $filter, Flash) {
var data =$scope.formData.mdpSunday;
});

页面加载时我无法在控制器中获取初始值

【问题讨论】：

This isn't the appropriate use of ng-init。 “ngInit 的唯一适当用途是为 ngRepeat 的特殊属性起别名。”。 “除了这种情况，您应该使用控制器而不是 ngInit 来初始化作用域上的值。”。您基本上是在向后执行此操作，您应该始终使用控制器来设置范围，而不是使用范围来设置控制器。

标签： html angularjs angularjs-scope

【解决方案1】：

您想在 Angular 设置值之前读取 ngInit 值。

第一个选项：

这样您就可以收听您的ngInit 值，并在她设置时读取您的数据。您可以使用$watch 方法：

控制器

(function(){

function Controller($scope) {

  //Watch you ngInit value
  $scope.$watch('data', function(){
    //When your value is set, you can retrieve it
    console.log($scope.data);
  });


}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

HTML

  <body ng-app='app' ng-controller="ctrl" ng-init="data='5'">

    <input type="text" ng-model="data">

  </body>

但是，您不应该使用 $watch。您可以获得更有效和更正确的方法来实现这一点。

第二个选项：

您可以将ngInit 设置为函数。

控制器

(function(){

function Controller($scope) {

  $scope.init = function(n){
    $scope.data = n;
  }


}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

HTML

  <body ng-app='app' ng-controller="ctrl" ng-init="init(5)">

    <input type="text" ng-model="data">

  </body>

我认为 second 选项更简洁。

【讨论】：

回复有点晚了..但很好的答案（第二个）

【解决方案2】：

你需要等待变量初始化，$watch它

JSFiddle

$scope.formData = {};

$scope.$watch('formData.mdpSunday', function (newVal, oldVal) {
    console.log(newVal);
});

【讨论】：