CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
oakgun
oakgun

Reputation: 170

AngularUI modal custom scope

I wanted to define a custom scope for the modal (I don't want to use dependency injection for reasons) I am using in my project, but I'm getting an error whenever I define a scope in $modal.open. Here is the plunk I created from the example on AngularUI's website: http://plnkr.co/edit/rbtbpyqG7L39q1qYdHns

I tried debugging and saw that (modalOptions.scope || $rootScope) returns true with a custom scope and since true (obviously) doesn't have a $new() function defined, an exception is thrown.

Any thoughts?

Upvotes: 0

Views: 1421

Answers (2)

Jorge Casariego
Jorge Casariego

Reputation: 22212

First Way

To pass a variable to a modal you can do it in this way

var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        },
        test: function(){
          return  $scope.test;   //This is the way
        }
      }
    });

In your modal you have this

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items, test) {

  $scope.items = items;
  $scope.test = test;   // And here you have your variable in your modal

  console.log("Test: " + $scope.test)

  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

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

Here you have your own example in Plunker

Second Way

var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      scope: $scope,    // In this way
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;

  //You have available test and hello in modal
  console.log("Test 1: " + $scope.test);  
  console.log("Test 2: " + $scope.hello);

  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

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

Plunker of the second way

Upvotes: 0

Robin-Hoodie
Robin-Hoodie

Reputation: 4974

You'll have to pass a scope instance:

var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      },
      scope: $scope
    });

You can also pass your own custom scope if you don't want to use the controller's scope, working plnkr:

http://plnkr.co/edit/1GJTuVn45FgPC3jIgyHv?p=preview

Upvotes: 2

Related Questions