模态不基于模型工作答案

【问题标题】：Modal not working based on model模态不基于模型工作
【发布时间】：2016-10-09 06:26:23
【问题描述】：

我有一个用于创建和编辑细节的模态弹出模板。它通过使用角度和模型来填充值在创建和编辑之间弹出。但是弹出的模态框并没有反映创建条件，而是反映了编辑条件，说明这部分在调试的时候已经通过了

$scope.ID = 0;
$scope.Title = '';
$scope.modalHeader = "Add New List";

但是当模态弹出时，Title字段不为空，并且没有填充标题。

总而言之，当点击编辑和创建按钮时，调试器会反映。

html:

<button class="btn btn-success" ng-disabled="error" data-toggle="modal" data-target="#addNewListModal" ng-controller="boardCtrl" ng-click="editList('new')">
    <span class="glyphicon"></span>Add New List
</button>
<div class="row" ng-controller="boardCtrl">
    <div id="loggedInUsername" hidden>@ViewBag.Username</div>
    <div ng-include="'/AppScript/busyModal.html'" ng-show="isLoading"></div>

    <div class="col-lg-3 panel panel-primary colStyle" id="{{toDoList.Id}}" kanban-board-drop="over"
         ng-repeat="toDoList in toDoLists">
        <div class="panel-heading" style="margin-bottom: 10px; text-align: center;">
            <h3 class="panel-title">
                {{toDoList.Title}}
                <button class="btn pull-right" ng-disabled="error" data-toggle="modal" data-target="#addNewListModal" ng-click="editList($index)">
                    <span class="glyphicon glyphicon-pencil" style="color:blue"></span>
                </button>
            </h3>
        </div>
        <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#addNewTaskModal" data-tasklistid="{{toDoList.Id}}">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
        </button>
        <div class="thumbnail" draggable="true" kanban-board-dragg="toDoTask"
             ng-repeat="toDoTask in toDoList.ToDoTasks" style="margin-bottom: 10px;">
            <div class="caption">
                <h5><strong>{{toDoTask.Title}}</strong></h5>
                <p>{{toDoTask.Description}}</p>
                <p><button href="#" class="btn btn-primary btn-sm" ng-click="FindToDoTask(toDoTask.Id);" data-toggle="modal" data-target="#editTaskModal">Edit</button>
                </p>
            </div>
        </div>
    </div>

ctrl.js:

 $scope.editList = function (id) {
    debugger;
    if (id == 'new') {
        //$scope.edit = true;
        //$scope.incomplete = true;
        $('#newListSubmit').removeAttr('disabled');
        $scope.ID = 0;
        $scope.Title = '';
        $scope.modalHeader = "Add New List";
    } else {
        //$scope.edit = false;
        $scope.ID = $scope.toDoLists[id].ID;
        $scope.Title = $scope.toDoLists[id].Title.trim();
        $scope.modalHeader = "Update List";
        //$scope.incomplete = false;
    }
};

模态：

<div id="addNewListModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" id="modalTitle" ng-model="modalHeader">{{modalHeader}}</h4>
                </div>
                <div class="modal-body" id="modalBody">
                    <!-- content goes here -->
                    <input type="text" hidden="hidden" ng-model="ID" name="ID">
                    <form id="newListForm" method="post">
                        <div class="form-group">
                            <label for="newListTitle">Title</label>
                            <input type="text" class="form-control" id="newListTitle" name="Title" placeholder="Enter Title" ng-model="Title">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="newListSubmit" type="submit" class="btn btn-default" ng-click="AddNewList();">Submit</button>
                </div>
            </div>

        </div>
    </div>

【问题讨论】：

提供小提琴？

标签： html angularjs twitter-bootstrap

【解决方案1】：

你有 2 个 boardCtrl 控制器实例，一个在按钮上：

<button class="btn btn-success" 
        ng-disabled="error" 
        data-toggle="modal" 
        data-target="#addNewListModal" 
        ng-controller="boardCtrl" 
        ng-click="editList('new')">

和其他在主 div 上：

<div class="row" ng-controller="boardCtrl">
  .....
</div>

它们创建不同的范围（即使您将使用相同的别名，例如ng-controller="boardCtrl as bc"），因此，只需将您的 ngController 移动到两个元素部分的共同部分并从按钮和行 div 中删除。例如，您可以将 ngController 移动到 body 标签：

<body ng-controller="boardCtrl">
  <button class="btn btn-success" 
          ng-disabled="error" 
          data-toggle="modal" 
          data-target="#addNewListModal" 
          ng-click="editList('new')">
  <div class="row">
    .....
  </div>
</body>

plunker：http://plnkr.co/edit/boPkGYvAPzDywStMFp4c?p=preview

【讨论】：