模式不工作基于模型

我有一个模式弹出式模板，它是用于创建和编辑的细节。它通过使用角度和模型填充值来创建和编辑之间弹出。然而，调试模式不工作基于模型

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

来源

2016-10-08 Z.V

提供一个小提琴？ – Siddharth

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

来源

2016-10-08 21:06:31 Andriy

模式不工作基于模型

回答

相关问题