Angular.ui-将数据传递给模态时出错

Question

I've created a modal to edit objects in a list. Here is the list:

<div class="container">
  <label class="text-center">Previous Grades</label>
  <table class="table">
    <th ng-repeat="head in tableHeadings"> {{head}}</th>
    <tr ng-repeat="gr in grades track by $index" >
      <td > {{gr.name}}</td>
      <td>{{gr.teacher}}</td>
      <td> {{gr.score}}</td>
      <td><button class="btn btn-info btn-sm" ng-click="open($index)"><span class="glyphicon glyphicon-pencil"></span></button></td>
    </tr>
  </table>
</div>

Here is the function that opens modal:

$scope.open = function (index) {
      var modalInstance = $modal.open({
        templateUrl: '../views/modalEdit.html',
        controller: 'modalInstanceController',
        resolve: {
          items: function () {
            return $scope.grades;
          },
          index: function (){
            return index;
          }
        }
      })

And here is the modal controller:

.controller('modalInstanceController', function ($scope, $modalInstance, grades, index) {
    $scope.grades = grades;
    $scope.index = index;

    $scope.gradeEditing = $scope.grades[index];

    $scope.ok = function(){
      $modalInstance.close();
    };
    $scope.cancel = function(){
      $modalInstance.dismiss('cancel');
    }
  });

I'm getting a $injector error! I injected the resolve values but it still doesn't work :/ That's the error i'm getting:

>  Error: [$injector:unpr] Unknown provider: gradesProvider <- grades
http://errors.angularjs.org/1.3.4/$injector/unpr?p0=gradesProvider%20%3C-%20grades

Any ideas?

Answer 1

That is because you defined the "grades" in resolve as "items", not grades:

    resolve: {
      items: function () {
        return $scope.grades;
      },
      index: function (){
        return index;
      }
    }

Make it the following and it will work:

    resolve: {
      grades: function () {
        return $scope.grades;
      },
      index: function (){
        return index;
      }
    }