Как установить свойство scope с помощью ng-init?

Я пытаюсь установить значение свойства $scope с помощью ng-init, и я не могу получить доступ к этому значению в 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 undefined. Не должно быть "value"?

Ответы

Ответ 1

Вы пытаетесь прочитать заданное значение до того, как будет выполнено назначение Angular.

Демо:

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

В идеале вы должны использовать $watch, как предложено @Beterraba, чтобы избавиться от таймера:

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

Ответ 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

Ответ 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

Ответ 4

Попробуйте этот код

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>

Ответ 5

Как и 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>

Это должно сработать!

Ответ 6

У меня были проблемы с $scope.$watch, но после большого тестирования я узнал, что мой data-ng-model="User.UserName" был плохо назван, и после того, как я изменил его на data-ng-model="UserName", все сработало нормально. Я ожидаю, что это будет . в названии, вызывающем проблему.