CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrapangular-ui-modal
Al Ex Tsm
Al Ex Tsm

Reputation: 2102

Angular route inside modal

I have 2 routes:

app.config(['$routeProvider', '$locationProvider', function(
  $routeProvider, $locationProvider) {
    $routeProvider.
    when("/list/:class", {
        controller: "listController",
        templateUrl: "DatabaseObject",
        reloadOnSearch: true
    }).
    when("/edit/:class/:id?", {
        templateUrl: "editortemplate"
    }).
    otherwise("/custombrowsingstartpage");
}]);

They both work fine!

What I would like is to be able to render the "editortemplate" of one of the routes within a modal window from the "/list/:class" route.

Within my "listController" I have the modal opening function:

    $scope.showEditorPanel = function (size, a, b) {
      //console.log($scope);
      var modalInstance = $modal.open({
      animation: true,
      //templateUrl: '#/edit/'+b+'/'+a,
      templateUrl: 'editortemplate',
      controller: 'editorController',
      size: size,
      backdrop: true,
      scope: $scope
    });

The template renders well but I don't know how to pass it the class and id variables the template requires(as shown in its route).

I tried defining route with variables(class== var b, id== var a) instead of template url but no luck:

//templateUrl: '#/edit/'+b+'/'+a,

Upvotes: 1

Views: 1047

Answers (3)

gkl
gkl

Reputation: 339

To pass data to the modal window, you need to use the resolve method of the modal instance. It works just like the same property in the router:

$scope.showEditorPanel = function (size, a, b) {
  var modalInstance = $modal.open({
    ...
    resolve: {
      class_id: function () { return $scope.class_id }
    }
  });

Then you need to require that in the the modal window's controller:

function editorController ($modalInstance, $scope, class_id) {
  // use the class_id ...
  $scope.class_id = class_id;
}

This fixes the 'class_id' in the explicit requirements of the modal controller and will help with troubleshooting down the road. You could have passed it in "secretly" via the $scope, but this is not a good idea (I categorically avoid the $scope property in $modal!). Explicit code is good code!

Upvotes: 1

Al Ex Tsm
Al Ex Tsm

Reputation: 2102

I just had to define the expected variables as $routParams:

  $scope.showEditorPanel = function (size, a, b) {
    //console.log($scope);
    $routeParams.class=b;
    $routeParams.id=a;
    var modalInstance = $modal.open({
      animation: true,
      //templateUrl: '#/edit/TissueSample/'+a,
      templateUrl: 'editortemplate',
      controller: 'editorController',
      size: size,
      backdrop: true,
      scope: $scope
    });

Upvotes: 0

Lucas
Lucas

Reputation: 10303

If you add a 'resolve' object you can send what you want, I believe this is the "Angular" way to do this with $modal :

$scope.showEditorPanel = function (size, a, b) {
  var modalInstance = $modal.open({
  animation: true,
  templateUrl: 'editortemplate',
  controller: 'editorController',
  size: size,
  backdrop: true,
  resolve: {
           scope: function () {
                            $scope.properties.class = a;
                            $scope.properties.id = b;
                            return $scope.properties;
                        }
           }
});

Upvotes: 1

Related Questions