lundi 20 avril 2015

AngularJS - Failing to instantiate Controller on modal call

I'm trying to make a CRUD operation in AngularJS by using ui-bootstrap modal.

I guess I'm not getting the idea of setting Controller's Inheritance and everytime I try to open a modal and call the Children Controller I'm getting an error:

Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- ChildCtrl

The parent view look like this:

<div ng-controller="ParentCtrl">
    <div>
        stuff to handle items.
    </div>

      <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
          </div>
          <div class="modal-body">
          </div>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
</div>

The child view:

    <div class="modal-content" ng-controller="ChildCtrl">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"  ng-click="close()" >
            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
          </button>
        <h4>Delete</h4>
      </div>
      <form name="deleteForm" ng-submit="delete()">
      <div class="modal-body">
some info about the model here
      </div>
        <div class="modal-footer">
              <input class="btn" value="Delete" type="submit"/>
        </div>
      </form>
    </div>

The parent controller looks like this:

myApp.controller('ParentCtrl', ['$scope', '$modal', function ($scope, $modal) {

    //some stuff here
    $scope.delete = function (item, size) {
        $scope.modalInstance = $modal.open({
            templateUrl: 'views/delete.html',
            controller: 'ChildCtrl',
            size: size,
            resolve: {
                item : function () {
                    return item
                }
            }
        });
    };
    //some stuff here
}]);

And the child one, like this:

myApp.controller('ChildCtrl', ['$scope','$modalInstance', 'item', 'ItemService', function ($scope, $modalInstance, item, ItemService) {

    $scope.delete = function () {
        ItemService.delete({ id: item.id }, function () {
            $modalInstance.close();
            $scope.$emit('itemUpdate');
        })
    };
}]);

Thanks in advance!

Aucun commentaire:

Enregistrer un commentaire