模式不工作基於模型

我有一個模式彈出式模板，它是用於創建和編輯的細節。它通過使用角度和模型填充值來創建和編輯之間彈出。然而，調試模式不工作基於模型

$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

模式不工作基於模型

回答

相關問題