javascriptangularjsangular-ui-bootstrapangular-ui-modal

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,

Solution

  • 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
        });