2014-01-19 4 views
0

Я занимаюсь многоголоджированием, и я не могу понять, почему это не сработает. У меня есть «PlayerController» и форма для добавления нового игрока. Входы привязаны к $ scope.NewPlayer.name и $ scope.NewPlayer.color и обновляют переменные области при изменении. Когда вы нажимаете «добавить нового игрока», форма должна сбрасывать переменные области видимости, поэтому входы пустые.AngularJS Databinding - Входы, не обновляемые с модели

$scope.startNew = function() 
{ 
    $scope.NewPlayer.name = ""; 
    $scope.NewPlayer.color = ""; 

    $("#new_player_modal").modal("show"); 
} 

Но это не обновляется. Пробовал $ Scope. $ ОТНОСИТЬСЯ() и $ сфера. $ Дайджеста(), и это говорит

Error: [$rootScope:inprog] $apply already in progress 

Вот HTML

<!-- Player Modal --> 
    <div class="modal fade" id="new_player_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" ng-controller="PlayerController"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title" id="myModalLabel">Create a New Player</h4> 
      </div> 
      <form id="new_player_form" ng-submit="startNewSubmit()"> 
      <div class="modal-body"> 

       <div class="form-group"> 
       <label for="exampleInputEmail1">Name</label> 
       <input type="text" ng-model="NewPlayer.name" class="form-control" id="exampleInputEmail1" placeholder="Leave Blank To Enter Later"> 
       </div> 
       <div class="form-group"> 
       <label for="exampleInputPassword1">Color</label> 
       <input type="text" ng-model="NewPlayer.color" class="form-control color-input" id="exampleInputPassword1" placeholder="HEX Color"> 
       </div> 

      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="submit" class="btn btn-primary">Save changes</button> 
      </div> 
     </div><!-- /.modal-content --> 
     </form> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 

Что я делаю неправильно?

Edit: чтобы очистить confusion-

$scope.startNewSubmit = function() 
{ 
    var cont = true; 
    if($scope.newPlayerColor) 
    { 
     Player = $scope.getPlayerByColor($scope.newPlayerColor); 
     if(Player != null) 
     { 
      alert("Player Color Already Selected!"); 
      cont = false; 
     } 
    } 
    else 
    { 
     alert("Please choose a color."); 
     cont = false; 
    } 

    if($scope.newPlayerName) 
    { 
     Player = $scope.getPlayerByName($scope.newPlayerName); 
     if(Player != null) 
     { 
      alert("Player Name Already In Use!"); 
      cont = false; 
     } 
    } 

    if(cont) 
    { 
     var Player = {"name":$scope.newPlayerName,"color":$scope.newPlayerColor}; 
     $scope.players.push(Player); 

     $("#new_player_modal").modal("hide"); 
    } 
} 

StartNew и startNewSubmit различны.

+0

Ваш метод в контроллере называется '' 'startNew''', и при этом вы вызываете' '' startNewSubmit''' –

+0

Где ваша основная html с кнопкой «Создать новый плеер» с помощью метода startNew, из которого вы показываете модальное окно? Также почему вы не используете $ modal service и не используете jquery-подобный подход? –

+0

startNew и startNewSubmit разные. Я ничего не знаю о модальности angularjs. Я новичок в этом. –

ответ

0

http://jsfiddle.net/23t4b/1/

Чтобы ответить на ваш вопрос: вы используете свои модели как NewPlayer.name и NewPlayer.color, в то время как вы имеете в виду их (контроллер), как newPlayerName и newPlayerColor

Примечание: в будущем, это поможет если вы подготовили (функционирует) jsfiddle для других, чтобы быстро и эффективно сосредоточиться на ответе на ваши вопросы. Например, со сценарием, который вы опубликовали, мне приходится макетировать $scope.getPlayerByColor и $scope.getPlayerByName. Кроме того, вы можете захотеть реорганизовать эти два в сервисы и не забудьте инициировать $scope.players = []

Смежные вопросы