Question

我有一个模态弹出模板，用于创建和编辑细节。它通过使用angular和model填充值来创建和编辑之间的弹出窗口。但是，模态弹出窗口并不反映创建条件，但确实反映了编辑条件，这意味着此部分在调试时已经完成

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

但是当模态弹出窗口时，标题字段不为空且标题未填充。

总而言之，调试器在点击编辑和创建按钮时确实反映出来。

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>

Answer 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

模态根据模型

1 个答案: