CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Gaurav
Gaurav

Reputation: 133

Unable to call the controller in the angular ui bootstrap $modal

I want to generate a modal pop up on click of a button. I am using ui bootstrap of angular with $modal service.

Now, when I click on button, I am writing the following code. 

  $scope.modalOpen = function () {
                    var modalInstance = $modal.open({
                        templateUrl: 'views/includes/someModal.html',
                        controller : //here I want to use the same controller where the current function is getting called
                     });
                };

I am unable to call the same controller. Am I making any mistake? I tried Google but no success :( Please suggest. Thanks in advance :)

Upvotes: 1

Views: 1077

Answers (3)

Bryan Euton
Bryan Euton

Reputation: 929

You probably don't want to make it use the same controller. Since the scope isn't isolated, your modal can call functions from your current controller. You can also have an inline controller like the following:

The reason why you couldn't use functions from your current scope is you would have to give the modal your current scope to do that. Be careful when you do this. Your modal can mess up your current object. I went ahead and created a "save" and "cancel" button so that you can undo the changes.

Html

<div ng-controller="simpleController">
    {{ item.title }}
    <button ng-click="open();">Click Me</button>
</div>

modal template

<script type="text/ng-template" id="views/includes/someModal.html">
    <div class="modal-header">
        <h3 class="modal-title">Title!</h3>
    </div>
    <div class="modal-body">
        title: {{ item.title }}<br/>
        Click the buttons below to change the title throught the controller's function
        <button ng-click="fn('test');">test</button>
        <button ng-click="fn('test 1');">test 1</button>
        <button ng-click="fn('test 2');">test 2</button>
    </div>
    <div class="modal-footer">

        <button ng-click="close(true);">Save</button>
        <button ng-click="close();">Close</button>
    </div>
</script>

javascript

angular.module("myApp", ['ui.bootstrap']).controller("simpleController", ["$scope", "$uibModal", function($scope, $uibModal){
    $scope.item = { title: "test", stuff: "other stuff"};
    $scope.fn = function(title){
        $scope.item.title = title;
    };
    $scope.open = function () {
        var intialItem = angular.copy($scope.item);
        var modalInstance = $uibModal.open({
            templateUrl: 'views/includes/someModal.html',
            controller:  ["$scope", function(scope){//add other functionality here                  
                scope.close = function(save){
                    if(!save){
                        $scope.item = intialItem;
                    }
                    modalInstance.close();
                }
            }],
            scope: $scope
        }).result.then(function(){
        }, function(){
            $scope.item = intialItem;//modal was dismissed
        });


    };
}]);

Upvotes: 0

Seth Flowers
Seth Flowers

Reputation: 9190

I am assuming the whole reason you want to do this is so you can share data (state) between the modal and the current controller.

You can achieve this without having to share the controller, using the resolve field on the modal configuration. 

function CurrentController($scope, $modal) {
  $scope.list = [];

  $scope.modalOpen = function () {
    var modalInstance = $modal.open({
      templateUrl: 'views/includes/someModal.html',
      controller : 'SomeOtherController',
      resolve: {
        list: function() { return $scope.list; }          
      }
    });
  };
}

This means that list will be dependency injected into SomeOtherController.

function SomeOtherController($scope, list) {
  $scope.list = list;
}

resolve (Type: Object) - Members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property in the router.

See the docs for $modal in angular-ui bootstrap.

Upvotes: 1

Oreste Viron
Oreste Viron

Reputation: 3805

If you open your modal from your controller, you can attempt something like this :

var myCtrl = this;
$scope.modalOpen = function () {
      var modalInstance = $modal.open({
           templateUrl: 'views/includes/someModal.html',
           controller : myCtrl 
      });
};

But I don't think it's a good practice to reuse a controller instance.

Upvotes: 0

Related Questions