如何使用 ng-init 设置范围属性？答案

【问题标题】：How to set scope property with ng-init?如何使用 ng-init 设置范围属性？
【发布时间】：2013-11-27 16:45:06
【问题描述】：

我正在尝试使用 ng-init 设置 $scope 属性的值，但我无法在控制器的 javascript 中访问该值。我究竟做错了什么？这是一个小提琴：http://jsfiddle.net/uce3H/

标记：

<body ng-app>
    <div ng-controller="testController" >
        <input type="hidden" id="testInput" ng-model="testInput" ng-init="testInput='value'" />
    </div>
    {{ testInput }}
</body>

javascript：

var testController = function ($scope) {
     console.log($scope.testInput);
}

在 javascrippt 中，$scope.testInput 是未定义的。不应该是“价值”吗？

【问题讨论】：

关于为什么这不起作用的所有答案都是错误的。您的代码很好，您只是绑定到其范围之外的testInput，仅限于其上方的 div。将 {{ testInput }} 上移到 div 中，或将 ng-controller="testController" 上移到 body 标签中。

标签： angularjs

【解决方案1】：

您正试图在 Angular 完成分配之前读取设置值。

演示：

var testController = function ($scope, $timeout) {
    console.log('test');
    $timeout(function(){
        console.log($scope.testInput);
    },1000);
}

理想情况下，您应该按照@Beterraba 的建议使用$watch 来摆脱计时器：

var testController = function ($scope) {
    console.log('test');
    $scope.$watch("testInput", function(){
        console.log($scope.testInput);
    });
}

【讨论】：

在这种情况下你可能会想要使用$scope.$watch。
@Beterraba 是的。你说得对。我已经更新了我的答案。谢谢。
您也可以使用$watch，但请记住，控制器将运行多次，因此无论您使用超时还是监视，它都可能运行多次。
谢谢你。有点令人惊讶的是，Angular 一开始就允许这种比赛发生，但我想这很难防范！

【解决方案2】：

只需将 ng-init 设置为一个函数。你不应该使用手表。

<body ng-controller="MainCtrl" ng-init="init()">
  <div ng-init="init('Blah')">{{ testInput }}</div>
</body>

app.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.testInput = null;
  $scope.init = function(value) {
    $scope.testInput= value;
  }
}]);

这是一个例子。

Plunker

【讨论】：

我喜欢这个，迫不及待想试试。我在使用 $watch 函数时遇到了一些问题。
这个是最好的建议
它很简单，您可以通过多种方式使用它，因为您可以控制自己的功能。
body 元素中的 ng-init 是不必要的。

【解决方案3】：

HTML：

<body ng-app="App">
    <div ng-controller="testController" >
        <input type="hidden" id="testInput" ng-model="testInput" ng-init="testInput=123" />
    </div>
    {{ testInput }}
</body>

JS：

angular.module('App', []);

testController = function ($scope) {
    console.log('test');
    $scope.$watch('testInput', testShow, true);
    function testShow() {
      console.log($scope.testInput);
    }
}

Fiddle

【讨论】：

对不起我的回答（太晚了）我现在看到@Beterraba 是第一个。恭喜！

【解决方案4】：

就像 CodeHater 说的你在设置变量之前访问它。

要解决此问题，请将 ng-init 指令移动到第一个 div。

<body ng-app>
    <div ng-controller="testController" ng-init="testInput='value'">
        <input type="hidden" id="testInput" ng-model="testInput" />
       {{ testInput }}
    </div>
</body>

应该可以！

【讨论】：

您的 {{ testInput }} 超出了控制器的范围，很可能仍为 null :/ 考虑将其移至 div 中
是的，@Mutmatt 这是一个错字。我直接在这里编码，没有太多的麻烦。对不起
我很荣幸成为第一个为这个问题的第一个实际答案投票的人。

【解决方案5】：

试试这个代码

var app = angular.module('myapp', []);
  app.controller('testController', function ($scope, $http) {
       $scope.init = function(){           
       alert($scope.testInput);
   };});

<body ng-app="myapp">
      <div ng-controller='testController' data-ng-init="testInput='value'; init();" class="col-sm-9 col-lg-9" >
      </div>
</body>

【讨论】：

【解决方案6】：

我在使用$scope.$watch 时遇到了一些问题，但经过大量测试后，我发现我的data-ng-model="User.UserName" 命名错误，在我将其更改为data-ng-model="UserName" 后一切正常。我希望它是导致问题的名称中的.。

【讨论】：