角度用户界面 使用模态形式编辑数据

我目前正在尝试使用AngularJs和Angular-UI构建一个待办单页应用程序。

目前，我在尝试编辑待办事项时遇到问题。

我打算使用模态窗口来编辑信息，我已经找到了如何在我的模态中发送数据，但我在从中检索编辑的数据时遇到了麻烦。我得到的数据是我发送到模态的数据。

这是我的代码：

控制器.js

var todoAngularControllers = angular.module('todoAngularControllers', []);
//controleur des todos.
todoAngularControllers.controller('TodoController', ['$scope', '$modal',
  function ($scope, $modal) {
    $scope.listTodos = [
        {
            id: 0,
            text: 'Exemple de tâche à réaliser',
            status: false
        }
    ]

    $scope.addTodo = function(){
        $scope.listTodos.push({
            id: $scope.listTodos.length -1, 
            text: $scope.newTodo.text ,
            status: false
        })
    }
    $scope.todoDone = function(todo){
        if (todo.status === false) {
            $scope.listTodos[todo.id].status = true
        }else{
            $scope.listTodos[todo.id].status = false
        };
    }
    $scope.open = function(todo){
        var modalInstance = $modal.open({
            templateUrl: 'app/partials/modalContent.html',
            controller: 'ModalInstanceController',
            size: 'lg',
            resolve : {
                todo: function(){
                    return $scope.listTodos[todo.id]
                }
            }
        });
        modalInstance.result.then(function (todo) {
            console.log(todo);
            $scope.listTodos[todo.id] = todo;
        });
    }
    $scope.delTodo = function(todo){
         $scope.listTodos.splice(todo.id, 1);
    }
}]);

//controleur de la modale de modification
todoAngularControllers.controller('ModalInstanceController', ['$scope', '$modalInstance','todo',
    function($scope, $modalInstance, todo){
          $scope.todo = todo;
          $scope.modTodo = function(){
            $scope.todo.text = $scope.modTodo.text;
          };
          $scope.ok = function () {
            $modalInstance.close($scope.todo);
          };
          $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
  };
}]);

待办事项列表.html

 <section>
    <header>
        <h1>Todos</h1>
        <form ng-submit="addTodo()">
            <input placeholder="Qu'avez-vous à faire ?" 
                    ng-model="newTodo.text"
                    ng-model-options="{ getterSetter: true }"
                    autofocus>
        </form>
    </header>
    <ul>
        <li ng-repeat="todo in listTodos">
            <span>{{todo.text}}</span>
            <span>{{todo.status | checkmark }}</span>
            <button type="button" ng-click="todoDone(todo)">
                {{todo.status | doneButton }}
            </button>
            <button type="button" ng-click="open(todo)">
                Modifier
            </button>
            <button type="button" ng-click="delTodo(todo)">
                Supprimer
            </button>
        </li>
    </ul>
</section>

模态内容.html

<div class="modal-header">
    <h3 class="modal-title">Saisissez la modification souhaitée</h3>
</div>
<div class="modal-body">
    <form>
            <input placeholder= {{todo.text}}
                    ng-model="modTodo.text"
                    autofocus>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

我试图检查数据，但"$scope.modTodo.text"我希望包含我的待办事项的编辑值，实际上包含我发送到模态的值。