AngularJS - Failing to instantiate Controller on modal call

Question

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!

Mukund Kumar · Accepted Answer · 2015-04-23 14:57:08Z

1

Just remove ng-controller directive from child view. replace this line:

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

to

<div class="modal-content" >


<script type="text/ng-template" id="delete.html">
 //include child view here.
</script>

Your code should be like:

<div ng-controller="ParentCtrl">
    <div>
        stuff to handle items.
    </div>
    /* here your html correspond to parent controller end */
    /*include child template here*/
    <script type="text/ng-template" id="delete.html">
     //include modal popup html code here.
     <div class="modal-content" >

      <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>
    </script>

</div>

edited Apr 23, 2015 at 14:57

answered Apr 20, 2015 at 20:07

Mukund Kumar

23.5k20 gold badges64 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lerp90 Over a year ago

Should I just add the script tags as they are in your example? I'm not getting if I have to do that or include the view's code there.

Mukund Kumar Over a year ago

I have a.dded more info in above answer.

lerp90 Over a year ago

Thanks, I'll try and tell you how it goes.

Collectives™ on Stack Overflow

AngularJS - Failing to instantiate Controller on modal call

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related