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

The function in which the "useStyles" React Hook is invoked is not a valid React function component or a defined custom React Hook function

After integrating Material UI with React, I encountered the following error message: React Hook "useStyles" is called in function "appBar" which is neither a React function component nor a custom React Hook function I have carefully checked the rules of ...

Unable to open new tab using target _blank in React js production build

After attempting to access the link, a 404 error appeared in the live version of react js and triggered an error on the firebase hosting platform. <Link target='_blank' to={'/property-details?id='some_id'}/> ...

The onload function for a JSP embedded in an IFrame was causing the IFrame to expand and fill the entire browser

I am encountering an issue with an IFrame inside a DIV where the SRC attribute is being dynamically set by a JavaScript function. When the SRC is set to "file.jsp", an onload function within the file.jsp containing style adjustments was causing the IFrame ...

Identifying sluggish GPU performance on a mobile device using three.js: A guide for developers

My game runs extremely slow on older mobile devices like the Samsung Galaxy S4 and iPhone 5 when shadows are enabled. However, when shadows are turned off, performance improves significantly. Is there a way to detect a slow GPU in order to disable sh ...

Enhancing the shadow effects on ThreeJS using buffergeometry

I'm currently working on a project where I have loaded a .gltf model in ThreeJS with a keyframe animation that alters the shape of the object (it's a point level animation). Everything seems to be functioning correctly, except for the fact that t ...

Sort AngularJS data using multiple select menus

I am trying to create a way to order my data based on multiple select menus. For example: Order : <select ng-model="filterOrder"> <option value="+">- to +</option> <option value="-">+ to -</option> </select> C ...

Dealing with a situation where different functions need to be called based on a condition while using unique button names. This is

<button type="button" class="btn btn-primary ms-4" (click)="update()">Save</button> <button type="button" class="btn btn-primary ms-4" (click)="create()">Add</button> B ...

Is NextJS on-demand revalidation compatible with Next/link?

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#on-demand-revalidation According to the NextJS documentation, it appears that on-demand cache revalidation should function properly with regular <a> tags and when t ...

Order JSON object based on designated Array

I'm looking to organize a JSON object in a specific order, Here is the current object structure: { "you": 100, "me": 75, "foo": 116, "bar": 15 } I would like to rearrange this object in the following sequence ['me', 'foo', &apos ...

In JavaScript, if you check for the existence of a key in an object, it

Recently, I ran into an issue with an undefined error when trying to access a value in a JavaScript object key. I retrieved arrays of objects using the mongoose.find().exec() callback and then checked each object for a specific key. Here is an example obj ...

Manipulating Strings in JavaScript Arrays

I am working with an array of arrays of data that is being retrieved from a csv file. My goal is to filter out specific indexes of an array based on the titles they contain. For instance: If an array index includes the title "Retail", I want to return the ...

Center your attention on an AngularJS-created input element

I'm currently working on a todo list project using AngularJS and I am wondering if there is a method to automatically focus on an input box after creating it by clicking on a button. As of now, the save function in my controller looks like this: $sc ...

What is the optimal method for saving and organizing data in SQL?

I currently have a MySQL table containing data that is displayed in an HTML table. Using JavaScript and drag & drop functionality, I am able to locally sort this table. My question is, what is the most effective method for saving these sorting changes? W ...

The returned state from setState(prev) seems to be in the opposite order when referencing another useState variable within a useEffect

As part of my interactive chat simulation project, I have implemented a feature where users can click on a button named obj4 to start their chat session. Initially, everything functions smoothly, displaying messages 1-4 in the correct order. However, when ...

sending data to Google Maps and updating it

OPERATING SMOOTHLY My requirement is to display only the items that match the entered username and password. I am unable to pass PHP variables to JavaScript in order to query the database and update the map. The following code is functioning correctly (p ...

Is it possible to swap out the content within a <div> element with an external piece of HTML code using JQuery or JavaScript whenever the viewport dimensions are adjusted?

<html> <head> </head> function () { var viewportWidth = $(window).width(); if (viewportWidth < 700) { $('#wrapper').load('A.html'); }; <body> &l ...

The text loader feature in THREE.js is failing to load

My first attempt at coding THREE.js resulted in a black screen when I tried to load the Text loader. Can someone help me resolve this issue? I kept getting the following error even after multiple attempts: three.module.js:38595 GET 404 (Not Found) ...

Utilizing conditional statements for confirming purchased orders with a pop-up confirmation box

function purchaseClicked() { var orders = prompt("Are you sure you want to buy these Items?"); if (orders != null) { alert('Please try selecting your items again!') } else { alert('Thank you for shopping ...

What is the best way to collect and store data from various sources in an HTML interface to a Google Spreadsheet?

Currently, I have a spreadsheet with a button that is supposed to link to a function in my Google Apps Script called openInputDialog. The goal is for this button to open an HTML UI where users can input text into five fields. This input should then be adde ...

Interactive Component overlying Layer - HTML/CSS

Currently, I am working on a web application that features a navigation bar at the bottom of the screen. To enhance visibility, I decided to apply a linear gradient overlay above the underlying elements. This screenshot illustrates what I mean. However, I ...