Angular routing within a modal box

I currently have two functioning 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");
}]);

Both of these routes are working well!

My goal is to render the "editortemplate" from one route within a modal window on the "/list/:class" route.

Within the "listController," I have a function that opens the modal:

    $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 correctly, but I am unsure how to pass it the necessary class and id variables that the template requires based on its route.

I attempted defining the route with variables (class == var b, id == var a) instead of the template URL, but had no success:

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

Answer №1

By incorporating a 'resolve' object, you have the ability to customize the data being sent. To achieve this functionality within $modal in Angular, consider the following implementation:

$scope.displayEditor = function (size, param1, param2) {
  var modalInstance = $modal.open({
    animation: true,
    templateUrl: 'editortemplate',
    controller: 'editorController',
    size: size,
    backdrop: true,
    resolve: {
      configData: function () {
        $scope.options.property1 = param1;
        $scope.options.property2 = param2;
        return $scope.options;
      }
    }
  });

Answer №2

In order to send information to the modal window, you must utilize the resolve method within the modal instance. This functions similarly to the property found in the router:

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

Subsequently, you will need to include this in the modal window's controller:

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

By specifying the 'class_id' in the explicit requirements of the modal controller, potential issues can be easier to diagnose in the future. While it may have been possible to pass it through the $scope variable discreetly, this is not recommended (I personally avoid using the $scope property in $modal!). Clear and direct code is always preferable!

Answer №3

After some trial and error, I discovered that by defining the expected variables as $routParams, the issue was resolved:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I display only four decimal places by default within textboxes in HTML?

Looking for assistance with configuring textboxes in a cshtml file. The textboxes are bound to decimal fields in a view model and currently display nine zeros after the decimal point. I would like to limit the display to only four digits by default witho ...

Trigger a JavaScript popup when a link is clicked

I need assistance with creating a pop-up for a link on my website. The code for the pop-up should be as follows: <script data-cfasync=false src="//s.ato.mx/p.js#id=8135&type=popup&size=800x600&hourscap=1"></script> Here is an exam ...

Managing State in React: A Guide to Updating Child Component State from Parent Component

I'm still fairly new to working with React and I'm trying to implement a Bootstrap modal for displaying alert messages. Within my main App.js file, I have an error handler that sends a prop to a Modal.js component in order to trigger the modal t ...

Straight pipe made with tubegeometry

Is it possible to create a straight tube using TubeGeometry? All the examples I find only show how to make curved tubes. ...

Guide on transferring a JavaScript value from Laravel Blade to a controller

Click the button below to initiate the process: <a onclick="myFunction()" href="{{ route('test')}}" data-toggle="tooltip" title="Release Funds" class="datatables__button"><i class=" ...

What is the best way to loop through a group of WebElements, and only log the results that contain a specific substring?

In my test case, I'm utilizing Mocha to handle the scenario. The test appears to be passing successfully, however, no logs are being printed... it('Is 'Mooooooo!!!! I2MaC0W' a Substring in Results?', function() { this.timeout(50 ...

Error in Formatting Labels in CSS

I currently have a form with textboxes that include validation. Everything works smoothly when clicking the save button for the first time, but if we fill out the textboxes and then remove the text, an error message is displayed on the textboxes. You can v ...

Steps to reinitialize the error code after removal from the roster

Currently, I am working on creating a series of textboxes and dropdown menus using jQuery. So far, the add function is functioning smoothly without any glitches. However, my issue lies within the delete function. It works well when deleting sequentially, ...

Creating a duplicate of the Object in order to include a new key and value pair

While pre-fetching a product from a database using mongoose along with next.js and react-query, I encountered a situation where I had to perform a deep copy of a nested object to successfully add a key-value pair to it. Without this deep copy, the operat ...

Old information gets displaced by fresh data

As I work on creating HTML tags and assigning data, I encounter an issue with my code. Below is the snippet: MyCombo = function(args) { var dataUrl = args.url; var divID = args.divID; var div = document.getElementById(divID); var myTable ...

Tips for managing JavaScript within PHP code and vice versa

Usually, I include a lot of JavaScript on the website. However, the client informed me that they were unable to view the website correctly as they had disabled JavaScript on their end. After investigating, I discovered this issue. Now, my dilemma is wh ...

jQuery for Implementing Pagination Across Multiple Tables

As a novice in the world of JavaScript and jQuery, I am struggling with implementing pagination for multiple tables on a single page. My goal is to have several tables that can be paginated using one navigation system. However, all my attempts so far have ...

Why is the child's CSS hover not functioning when the body has an event listener attached to it?

Check out the repository link here: https://codepen.io/Jaycethanks/pen/WNJqdWB I am trying to achieve a parallax effect on the body and image container, as well as a scale-up effect on images when hovered over. However, the hover functionality is not work ...

Encountered an issue connecting Firebase with NextJs during build process

Recently delving into NextJS, I successfully created a project using Firebase. However, upon running "npm run build," an error has surfaced: @firebase/firestore: Firestore (X.X.X): Could not establish connection with Cloud Firestore backend. Backend faile ...

"Troubleshooting vertical tab inconsistencies in Jquery: addressing unexpected gaps and alignment

After spending a considerable amount of time on this, I'm still struggling to make it work properly. The main issue is the gap between the tabs and the content area. I've tried adjusting the positioning, but it ends up affecting the overall layo ...

What is the best way to locate an item reference for a specific DOM element?

Imagine a vast DOM structure with approximately 10,000 HTML elements, including 1,000 span tags. None of the span elements have any identifiers and are buried deep within other objects with long, complex Xpath paths that are not user-friendly for selectio ...

Updating an object within an array of objects with a replacement

Having trouble updating an object in an array of objects. Here is the initial array: myArray = [ {id: 0, description: "some description", status: "initial status", function: someFunction()}, {id: 1, description: "some descripti ...

Leveraging the power of the Twitter api within an Angular application

I have attempted to access the Twitter API within my AngularJS application, but I am encountering the following error. OPTIONS https://api.twitter.com/oauth2/token (anonymous function) @ angular.js:10765sendReq @ angular.js:10558serverRequest @ angular.js ...

A guide on showcasing nested arrays data in an Angular application

info = [ { list: [ { title: 'apple'} ] }, { list: [ { title: 'banana'} ] } ] My goal here is to extract the list items. Here is how they are structured. desired r ...

Troubleshooting issue with Express.json() functionality in the latest release of version 4.17

I'm currently exploring the MEAN stack and I am focused on performing CRUD operations. However, when I send data in the request body from Angular to the server, I end up receiving an empty request body. I'm unsure of where I might be making a mis ...