Passing Optional Parameters to AngularJS Modal

Is there a way to pass an optional parameter to my angularJS modal? Let's take a look at the code:

TRIGGER CONTROLLER:

$modal.open({
  templateUrl: 'UploadPartial.html',
  controller: 'photos.uploadCtrl',
  resolve: {
    preselectedAlbum: function preselectedAlbum() {
      return angular.copy($scope.selectedAlbum);
    }
  }
});

MODAL CONTROLLER:

app.controller('photos.uploadCtrl', [
  '$scope',
  '$modalInstance',
  '$injector',
  function uploadCtrl($scope, $modalInstance, $injector) {
    if ($injector.has('preselectedAlbum')) {
      console.log('happy');  // This should work, but $injector does not find it
    } else {
      console.log('sad');  // Always lands here instead :(
    }
  }
]);

NOTE: When I make preselectedAlbum a dependency, it works but throws an error when not explicitly passed. I want it to be optional.

Answer №1

Setting a value for the modal controller

angular.module('app')
    .controller('TestCtrl',TestCtrl)
    .value('noteId', null); // You can also add an optional parameter here

Answer №2

Aside from using the resolve: method, you can also send data to the modal controller through the scope: parameter.

$scope.preselectedAlbum = angular.copy($scope.selectedAlbum);

$modal.open({
  templateUrl: 'UploadPartial.html',
  controller: 'photos.uploadCtrl',
  scope: $scope,
});

Then, in the modal controller:

function uploadCtrl($scope, $modalInstance) {
  if ($scope.preselectedAlbum) {
    console.log('happy');
  } else {
    console.log('sad');
  }
}

Check out this example on Plunker: http://plnkr.co/edit/ewbZa3I6xcrRWncPvDIi?p=preview

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

"Exploring the character encoding in Angular's http.get

Having difficulty parsing JSON data in my Angular application. For example, when the JSON feed has { "title": "Halldórsson Pourié" }, my app displays Halldrsson Pouri I suspect that the issue lies with the character set, but I'm unable to locate w ...

Can someone please explain how to use the prevState in REACT?

Can you explain the difference between how to define the counterHandler function in these two examples? counterHandler = () => { this.setState(() => { return { times: this.state.times + 1 } }); } versus counterHandle ...

How to use JavaScript and regex to control the state of a disabled submit button

I have a challenge where I need to activate or deactivate a submission button in a form called btn-vote using JavaScript. The button will only be activated if one of the 10 radio buttons is selected. Additionally, if the person-10 radio button is chosen, t ...

Extracting information from a JSON data within an API

How can I retrieve data with a name tag from JSON data using Ajax? The function showCard is not functioning properly when I try to grab data with a name tag. My goal is to display the name of the API data when an img element with the class found is clicked ...

3D Object Anchored in Environment - Three.js

In my current scene, I have two objects at play. Utilizing the LeapTrackballControls library for camera movement creates a dynamic where one object appears to rotate based on hand movements. However, an issue arises as the second object also moves along w ...

How can we reset multiple selected values (mui chips) in a React Material-UI Autocomplete field when changing the value in a different field?

Is there a way to clear the mui-chips in Material UI Autocomplete TextField when the value in another field is changed? I have been struggling with clearing the subtype value when the Type value changes. Although I can update the drop-down options based on ...

The error states that the type '() => string | JSX.Element' cannot be assigned to the type 'FC<{}>'

Can someone help me with this error I'm encountering? I am fairly new to typescript, so I assume it has something to do with that. Below is the code snippet in question: Any guidance would be greatly appreciated. const Pizzas: React.FC = () => { ...

Steps for assigning a URI as a variable based on the environment, whether it is in production or not

Seeking advice on deploying a MERN app onto Heroku. I have the mongodb URI declared in a config file locally, but on Heroku I am using process.env.mongoURI. How can I adjust my code to use the local config file when running locally and the Heroku config wh ...

Link the source data within a v-for loop to the props value

I have brought in several JSON files containing different sets of data. For my parent.vue input, I aim to iterate through these JSON files dynamically. <div v-for="(item, index) in <!-- JSONFile + Rank -->" :key="index"> T ...

PHP file secured to only accept variables posted from HTML form

This is a basic HTML/AJAX/PHP script I have implemented. <form id="new_user" action="" method="post"> <div class="col-md-3 form-group"> <label for="username">Username</label> <input type="text" class="form-control" name ...

The quiet harmony of FeathersJS and Socket.io as they attentively listen to events is

I've been working hard to get everything set up and running smoothly, but it seems like I'm stuck on the last piece of the puzzle. Despite following the documentation closely, I can't seem to figure out what I'm missing. Here is the @an ...

What methods can I utilize to showcase the JSON data on my webpage efficiently?

I'm currently working on a script that makes an ajax request. The Cloud appears to be responding with JSON data, but I'm not sure how to display this data on my webpage. Any suggestions? Here you can find a link to view the neatly formatted JSON ...

a function that repeats every single second

A challenge I am facing is creating a countdown timer with a time that refreshes every second. My current implementation uses setInterval, but it only seems to run once instead of every second. Can anyone help me identify the issue in my code? var countDo ...

The icon on my page is not displaying, and the responsive menu is also not appearing

After tweaking the @media {} settings, I noticed that the icon displays properly when reduced, but disappears completely when fully covered with {}. Additionally, my responsive menu is not visible as expected. `@import url('https://fonts.googleap ...

Retrieve information from various tables in a SQLite database using Node.js

Is there a method to retrieve all data from multiple tables in a database? Currently, I have managed to fetch all data from a single table: router.get('/', function (req, res, next) { db.serialize(function () { db.all('SELECT id, name ...

Having trouble activating the submit function using an external JavaScript file

Having trouble getting the form to submit properly. I have placed the form inside a <div id="access"></div> by setting its innerHTML using an included js file in the header of the page. Here's how it looks: <div id="access"> < ...

Why is only the peak of the wave visible? I am eager to showcase the full extent of its beauty

Having an issue with the appearance of a superposed wave using threejs. When displayed, the wave made from plane material only shows the upper half, but when turned upside down using mouse dragging, it appears correctly. // Turn the wave plane upside down ...

Modifying HTML text with JavaScript according to the content of the currently selected div

Greetings! This is my first time posting a question, and I wanted to mention that I am relatively new to javascript/jquery. I have a gallery that displays image details on hover through text, while clicking on the image triggers a javascript function that ...

Exploring jQuery: Techniques for Hovering, Changing, and Toggling Images

Currently, I am busy working on my project and I am attempting to achieve this by... I ideally want everything to be operational through click actions for each individual image, allowing them to have their unique "paper". I am aiming for a hover effect an ...

Discover instances of a string within an array using JQuery

I am currently exploring how to locate occurrences of a specific string within an array on the client side. The examples provided on the JQuery Docs all seem focused on number comparisons, which isn't quite what I need. Essentially, I'm attempti ...