Implementing $modal.open functionality in AngularJS controller using Ui-Bootstrap 0.10.0

Is there a way to properly call $modal.open from the controller in AngularJS since the removal of the dialog feature in ui-bootstrap 0.1.0? What is the alternative method available in the current version?

In previous versions like 0.1.0, it was simply done by using $dialog.dialog(); Then calling to Dialog(); in the library -

return {
  // Creates a new `Dialog` with the specified options.
   dialog: function(opts){
      return new Dialog(opts);
},

// creates a new `Dialog` tied to the default message box template and controller.
//
// Arguments `title` and `message` are rendered in the modal header and body sections respectively.
// The `buttons` array holds an object with the following members for each button to include in the

// modal footer section:

// * `result`: the result to pass to the `close` method of the dialog when the button is clicked

// * `label`: the label of the button
// * `cssClass`: additional css class(es) to apply to the button for styling

messageBox: function(title, message, buttons){
    return new Dialog({templateUrl: 'template/dialog/message.html', 
           controller: 'MessageBoxController', resolve: {model: {
      title: title,
      message: message,
      buttons: buttons
    }}});
}

Does anyone know how to implement $modal.open in version 0.10.0?

javascriptangularjsangular-uiangular-ui-bootstrap

Answer №1

Create a function to initiate opening:(set template, controller, resolve)

function open() {

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

});

Define the modal controller:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

    $scope.items = items; 

});

Invoke the function when needed:

open();

To trigger from the template:

replace

function open() {

with

$scope.open = function() {

and then call

$scope.open()

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

Perform a fetch request within a map function or loop

I'm currently working on iterating over an array of objects. Depending on the content of some of those objects, I need to execute a fetch function and wait for the result before updating the new array. Below is my JavaScript code: const allPosts = ...

javascriptarraysfor-loop

When I make a post request, I receive a response in the form of an HTTPS link, but it is not redirected to

I'm making a post request and receiving the response as follows: " [Symbol(Response internals)]: {url: 'https://login.somenewloginpage'}" My intention is to open a new page using that URL, but unfortunately it does not redirect t ...

javascriptnode.jsexpress

Encountering the error message "Angular 'Error: $injector:cdep Circular Dependency' while employing a factory in app.js"

I'm currently in the process of implementing token-based user authentication, but I've encountered a roadblock. While researching a solution, it seems like utilizing the $injector service might be the way to go, although I'm not completely c ...

angularjsjson-web-token

Exploring the inheritance of directives and controllers within AngularJS

I'm struggling to grasp the concept of inheriting a parent controller from a directive. In my setup, I have a simple example with a controller named MainCrtl. This controller is responsible for creating and removing an array of directives called inner ...

javascriptangularjs

Display different images based on user selection in vue.js

I am new to working with vue.js and I'm facing a challenge. My goal is to display images of NBA players based on the selected criteria using vue.js. For instance, if the Dunk contest champion is chosen, only images of Kobe and Jordan should be display ...

javascripthtmlcssvue.js

What is the reason for the malfunction of native one-time binding when using the `::` expression in Angular version 1.3.5?

I am having an issue with AngularJS's one-time binding feature using the :: expression. Despite my code setup, the values are still changing. I must be missing something crucial here. Consider this controller: $scope.name = "Some Name"; $scope.chang ...

javascriptangularjs

Node receiving empty array as result after processing post request

My current task involves testing the post method on Postman. Strangely, every time I post the result it shows an empty array []. Upon further investigation by console logging on the node side, it also returns an empty array. CREATE TABLE users ( user_ ...

javascriptnode.jspostgresqlexpress

Concerns have been raised regarding the lack of light and shadows being detected by THREE.BufferGeometry in JavaScript/th

I've been trying to generate terrain using noise functions, but I'm running into an issue where the BufferGeometry mesh isn't receiving any light from PointLight. When I switch to AmbientLight, the BufferGeometry is visible, but not with Poi ...

javascriptthree.jslightbuffer-geometry

What is the best way to ensure that my theme button changer has an impact on all pages throughout my website, not only on the

Looking for some help here - I've got a button that changes the theme/colour of my website, but it only seems to work on the homepage and not on any other pages. Anyone know how I can fix this issue? Here's the JavaScript code: $(document).ready ...

javascripthtmlasp.net

The requested external js scripts could not be found and resulted in a net::ERR_ABORTED 404 error

import express, { Express, Request, Response } from 'express'; const path = require("path"); import dotenv from 'dotenv'; dotenv.config(); const PORT = process.env.PORT || 5000; const app = express(); app.use(express.static(path.join ...

javascripthtmlnode.js

JavaScript class with callback function commonly used

I am looking to create a JavaScript class that can register multiple functions to run with a common callback. Each registered function should run asynchronously, and once they have all completed, the specified callback function should be executed. In addi ...

javascriptajaxangularjscallback

Secure access to an API using a certificate within a Vue.js application running on localhost

My vue.js app is built using vue-cli. The application is hosted at dev.example.com and the REST API can be found at dev.example.com/api/v1/. The backend has added an SSL certificate for security on the development environment. However, when I try to make a ...

javascripthtmlvue.jssslvue-cli

Why isn't the AngularJS Controller Data Binding {{$ctrl.test}} Functioning Properly?

I'm currently learning AngularJS on my own by attempting to create a basic app. I am encountering some issues with data binding when using a controller. todo-item.js 'use strict'; angular.module('todoItem', ['ngRoute'] ...

angularjsdata-binding

A situation where the event onclick fails to occur within NextJS

index.js: function Home () { return <div> <html> <head> <title>Site</title> </head> <body> <div class= 'v5_3' onclick = "func_click()"></div> </b ...

javascripthtmlcssnext.js

What is the process of converting a byte array into a blob using JavaScript specifically for Angular?

When I receive an excel file from the backend as a byte array, my goal is to convert it into a blob and then save it as a file. Below is the code snippet that demonstrates how I achieve this: this.getFile().subscribe((response) => { const byteArra ...

javascriptangulartypescriptentity-framework

When using `res.send()`, an error of Type Error may be encountered stating that the callback is not a function. However, despite this error,

I am currently working on a function for my Node.js server, using Express as the framework and MongoDB as the database. This function involves calling two mongoose queries: (1) Retrieving filtered data from one collection (2) Aggregating data from anothe ...

javascriptnode.jsmongodbexpresscallback

Showing information to several classes using JavaScript

I am currently developing a "Gamebook Engine" that enables users to set a custom username. The user name is extracted from an input element with the id="setUserNameInput" and stored using the function setUserName(). It is then displayed or loaded into an e ...

javascripthtmlcssclass

The perplexity regarding asynchronous functions and return statements

I'm attempting to send a request to a Web API and then return true from a function if the input is valid, or false if it's not. I need the request to be asynchronous so that the function doesn't return before the request is verified. While t ...

javascriptnode.jsdiscord.js

Changing innerHTML in CoffeeScript

Are there other options instead of using the 'innerHTML' property in CoffeeScript? In JavaScript, you typically write something like this: document.getElementById('element').innerHTML = "blah_blah" Is there a different approach to ac ...

javascriptcoffeescript

Using an if/else statement in a Jade Template to conditionally remove a select option

I'm a beginner with Jade and I've been assigned to add a select option to a webpage. Everything is working well, except for when the drop-down list is empty and the page is refreshed, an empty option element is created. I want to find a way to re ...

javascriptjquerynode.jsexpresspug