AngularJS数据绑定-输入不从模型更新

我已经在谷歌上搜索了很多次，我不明白为什么这不起作用。我有一个PlayerController和一个表单来添加一个新玩家。输入绑定到$scope.NewPlayer.name和$scope.NewPlayer.color，并在更改时更新范围变量。单击“添加新播放器”时，表单应重置范围变量，以便输入为空

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

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

但这并没有更新。尝试了$scope.$apply和$scope.$digest，结果显示

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 -->

---

startNew和startNewSubmit是不同的

回答您的问题：您使用的模型是NewPlayer.name和NewPlayer.color，而在控制器中将它们称为newPlayerName和newPlayerColor

---

注意：在将来，如果您为其他人准备一个功能正常的JSFIDLE，以便他们能够快速有效地集中精力回答您的问题，这会有所帮助。例如，对于您发布的脚本，我必须模拟$scope.getPlayerByColor和$scope.getplayerbycyname。此外，您可能希望将这两种方法重构为服务，并记住在控制器中启动$scope.players=[]

名为startNew的方法，在视图中，您调用startnewsubmit，其中是您的主html，通过按钮使用startNew方法创建新的播放器，从中显示模式窗口？另外，为什么不使用$modal服务并使用类似jquery的方法呢？startNew和startNewSubmit是不同的。我对angularjs模式一无所知。我是新手。请看下面我的答案。

$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");
    }
}