Angular-ui-bootstrap modal failing to display provided data

I have been working on implementing model data into a modal window that opens. The data is passed through a $http.post success and also in failure then() with different titles and button texts. Several data points are being passed to the modal:

//.then(){...//same as below }
,function (response){
     $scope.PostRespData = response.data.message || 'Rq Failed';

     $scope.pn = $scope.PostRespData.substring(53,63);

     //(status=400) response modal string
     $scope.name = 'Hey there!';

     //modal options
     $scope.opts = {
                backdrop: true,
                backdropClick: true,
                dialogFade: false,
                keyboard: true,
                templateUrl : 'alreadyexists.html',
                controller : ModalInstanceCtrl,
                resolve: {}
                };


    $scope.opts.resolve.item = function() {
                   return angular.copy({name:$scope.name, errmsg:$scope.PostRespData, num:$scope.pn}); // pass name to modal dialo
                        }

     //open the modal and create a modal Isntance
     var modalInstance = $uibModal.open($scope.opts);

     var ModalInstanceCtrl = function($scope, $uibModalInstance, $uibModal, item) {

          $scope.item = item;

          $scope.ok = function () {
          $uibModalInstance.close();

          };

          $scope.cancel = function () {
          $uibModalInstance.close();
                        }

The structure of my HTML template is as follows:

<div class="modal-header">
  <h1>{{item.name}}</h1>
</div>
<div ng-controller="Nav" class="modal-body">
<p>{{item.errmsg}}
    <a href="http://myserver.com/page.jsp?num="+{{item.num}}+"&c=y">View {{item.num}}</a>
</p>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">Edit Current Details</button>
<button class="btn btn-warning" ng-click="cancel()">Edit {{item.num}}</button>
</div>

I am encountering an issue where the static data appears in the modal but the dynamically passed data does not show up. I've dedicated much time today attempting to resolve this.

Edit: Here is a snapshot of the current outputhttps://i.stack.imgur.com/QYTeS.png

Your assistance would be greatly appreciated!

Answer №1

Highlighted by @charlietfl, the problem was due to hoisting. To resolve this issue with the code provided above, simply relocate var ModalInstanceCtrl = func.. from inside the button's ng-click calling $http.

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

Error: JSDOM - The document variable has not been declared

After creating a basic webpage that displays a single message, I decided to experiment with JSDOM and encountered an error. Despite researching online examples and Stack Overflow questions, I have struggled to resolve even the most straightforward scenario ...

Troubleshooting: Custom AngularJS directive not responding to ng-click event

I recently developed a custom directive, and while the controls defined in the templates are working smoothly, I encountered an issue. I needed to add an additional control - an image button, based on a certain condition. To achieve this, I utilized an IF ...

Exploring Angular 8 Route Paths

Working on an Angular 8 project, I encountered an issue with my code: src/app/helpers/auth.guard.ts import { AuthenticationService } from '@app/services'; The AuthenticationService ts file is located at: src/app/services/authentication.servic ...

Discover data using JavaScript recursively through paths

Here is the data structure I am working with: [ { name: 'root', children: [ { name: 'page', children: [ // and so on ] } ] } ] I am in need of a function that can retrieve ...

Struggles faced while trying to set up Karma using NPM

Attempting to set up Karma on a system running node v0.10.13 and npm 1.3.2. Tried both with and without sudo permissions. Here is the log: npm http GET https://registry.npmjs.org/karma ... (Error messages related to failed fetches from registry) ... > ...

When attempting to pass data to a modal, an error occurs due to props being undefined. This results in a TypeError with the message "Cannot

I'm working on a product listing feature where each item displays some information along with a "more details" button. When the button is clicked, a modal window opens to show additional details of the specific product (using props to pass data betwee ...

What is the best way to retrieve the nearest form data with jQuery after a child input has been modified?

I have a page with multiple forms, each containing several input checkboxes. When one of the form inputs changes, I want to gather all the parent form's data into a JSON array so that I can post it elsewhere. I'm having trouble putting the post ...

Trouble with the ejs <%- body %> rendering properly

I plan to utilize a predefined layout template named layout.ejs, and here is the code present in the file: <html> <head> <title></title> </head> <body> <%- body %> </body> </html> Currently, I ...

Can you explain the concept of an anonymous block in JavaScript ES6 to me?

Recently, I came across an article on pragmatists which discussed some interesting ES6 features. However, one concept that caught my attention was the use of an anonymous block within a function. function f() { var x = 1 let y = 2 const z = 3 { ...

Enzyme's simulate() failing to produce expected results with onChange event

I am facing an issue with a component and its related tests: import React from 'react'; import PropTypes from 'prop-types'; function SubList (props) { var subways = ['', '1', '2', '3', & ...

Functionality of jQuery Mobile Page

$(document).on("pageshow", "#mappage", function (event) { $("#doldur").append("<li> <label onclick='getBina(" + featuressokak[f].attributes.SOKAKID + ");'>" ...

The inefficiency of Angular's ng-show directive when used with an empty string

I am developing a web application using AngularJS. The user submits a maximum of 3 keywords to the server. My objective is to display commas between the keywords, but only if there are enough keywords. Take a look at the following examples: If there are ...

Verify if the value of localStorage matches the specified value, then conceal the element

This is my second query and I'm hoping it covers everything. My knowledge of javascript is limited, which has made it difficult for me to get my code working properly. Despite trying various different approaches, I have been unable to resolve the issu ...

The customized Vaadin component with a tag is missing from the MainView layout

I am attempting to integrate my custom vis component into the MainView VerticalLayout. However, it is appearing above the layout and the layout itself contains an empty component tag. Custom component code In this section, I have labeled my component as " ...

Next.js page transitions causing Google Tag Manager to malfunction with 'react-gtm-module'

I am currently working on a Next.js project and have successfully integrated Google Tag Manager (GTM) using the react-gtm-module package. Interestingly, everything works perfectly when the application is initially loaded in debug mode, regardless of the st ...

Tips for adding an item to an array within a Map using functional programming in TypeScript/JavaScript

As I embark on my transition from object-oriented programming to functional programming in TypeScript, I am encountering challenges. I am trying to convert imperative TypeScript code into a more functional style, but I'm struggling with the following ...

Instructions for passing a JavaScript variable to a PHP MySQL database

I am attempting to integrate a JavaScript variable into PHP MySQL, but I'm encountering issues with the insertion. Currently, it is being inserted as <javascript>document.write(window.outerWidth); </javascript> x <javascript>document ...

Troubleshooting: Why Files are Not Being Served by

I have noticed that there have been similar questions asked about this topic before, but I couldn't find a solution to my problem by reading the responses. I am trying to get my Node.js app to serve my files, and it seems like the page is correctly r ...

What is causing the TypeScript error in the MUI Autocomplete example?

I am attempting to implement a MUI Autocomplete component (v5.11) using the example shown in this link: import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autoco ...

Arranging arrangements in javascript

I am dealing with objects that contain the fields id and position. const items = [{id: 11, position: 1}, {id: 12, position: 2}, {id: 13, position: 3}, {id: 14, position: 4}, {id: 15, position: 5}, {id: 16, position: 6}]; These objects represent folders st ...