Struggling with undefined values in scope within angular-ui modal

I am having difficulties with referencing the scope in an angular-ui modal. Whenever I try to access the value of the scope, I receive an undefined message. My goal is to retrieve the data entered into ng-model="input.cost_center". Despite trying examples from others on the same topic, it doesn't seem to be working for me. Can anyone provide assistance? Thank you in advance.

Here is the plunk http://plnkr.co/edit/tIh5rbvseD7vxfPJHFd6?p=preview

Modal

$scope.openAddCenter = function () {
  var modalAddCenter = $modal.open({
    templateUrl: 'myModalAddCenter.html',
    controller: ModalAddCenterCtrl,
    resolve: {
    '$modalAddCenter': function() { 
      return function() { 
       return modalAddCenter; } 
   }
  }
});

};

Modal Controller

var ModalAddCenterCtrl = function ($scope, $modalAddCenter, $http){
  $scope.input = {};            
  $scope.ok = function(){
    alert($scope.input.cost_center);
    $modalAddCenter().close();
  };

  $scope.cancel = function(){
    $modalAddCenter().dismiss('cancel');
  };
};

HTML

<input type="text" class="form-control" id="modalCenter" ng-model="input.cost_center" placeholder="Cost Center" ng-minLength="8" maxLength="8" required />

Answer №1

It seems like there may be a issue with the resolve not functioning properly, but it appears that the intended functionality can be achieved by utilizing the $modelInstance parameter provided by angular-ui for modal controllers. You can try implementing it like this:

var ModalAddCenterCtrl = function ($scope, $modalInstance, $http){
  $modalInstance.close();
}

By using $modalInstance, you can easily access the current modal instance without the need to inject it as a resolver.

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

Tips for customizing the md-select icon

I work with the angular-material framework and specifically utilize its <md-select/> component. I am interested in styling its icon: https://i.stack.imgur.com/g4pu1.png In the past, we would modify its css by targeting the class .md-select-icon, ...

What are some ways to implement JavaScript library functionalities within a Nuxt.js environment?

This code snippet was successfully working in an html file: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Kakao JavaScript SDK</title> <script src="https://developers.kakao.co ...

What is the best way to utilize query parameters without using ui-router?

In my Angular application using ui-router, I am looking to maintain a separate state that is not related to routing. For example, if the URL is #/profile?color=green, the state is "profile" and the app color should be green. If the URL changes to #/profil ...

File writing issues are plaguing NodeJS, with middleware failing to function as well

I am facing a challenge with my middleware that is supposed to write JSON data to a file once the user is logged in. However, I am encountering an issue where no data is being written to the file or displayed on the console when the function is executed. ...

converting values to hexadecimal for array transmission in JavaScript

Looking to insert a hexadecimal value into an array in order to write to a device via modbus/TCP using socket communication. Currently facing an issue where I am unable to retrieve the hex value with the same data type as the elements present in byteArrayW ...

ES6 module import import does not work with Connect-flash

Seeking assistance with setting up connect-flash for my nodejs express app. My goal is to display a flashed message when users visit specific pages. Utilizing ES6 package module type in this project, my code snippet is as follows. No errors are logged in t ...

What is the reason that TypeScript does not automatically infer void & {} as the never type?

When TypeScript's void type is used in combination with other types through intersection, the outcomes vary. type A = void & {} // A becomes void & {} type B = void & '1' // B becomes never type C = void & 1 // C becomes never type D = void ...

Is it possible to insert HTML content as plain text into a div?

Currently, I have a code that extracts HTML stored in a string and places it into a div with the contenteditable attribute set to "true". However, I'm facing an issue where the HTML is being executed as part of the page instead of being treated as tex ...

Having trouble with passing parameters to the onclick event in an Angular directive

Check out the following Angular directive: angular.module("mySystem").directive("pageFooter", function () { return { restrict: "E", scope: { footerhref: '&' }, template: <button onclick="{{footerhref}}">{{fo ...

JavaScript regular expression to switch menu

Could someone clarify the meaning of this code snippet: /expanded/.test(classes) I understand that the '/' characters indicate a regular expression and 'expanded' is a class name. However, I am unsure about what .test(classes) does ...

Frisby.js is looking for a valid JavaScript object, but instead received an undefined value

Struggling to launch a new test using the API testing framework Frisby.js. In my previous tests that didn't involve reading reference files from disk, everything ran smoothly and quickly. The samples provided with Frisby also executed accurately. Thi ...

changing the css transformation into zoom and positioning

My goal is to incorporate pinch zoom and panning using hardware-accelerated CSS properties like transform: translate3d() scale3d(). After completing the gesture, I reset the transform and switch to CSS zoom along with absolute positioning. This method ensu ...

Ways to divide a string into pairs of two using jQuery

I have a variable containing a string with exactly 44 characters: 02081516171821242936374750565865666871737476 I want to split it into an array in the following format: arr[0]=02 arr[1]=08 . . arr[21]=76 Can someone help me achieve this? Thank you. UP ...

I'm looking for some clarity on incorporating <SpeedInsights /> into NextJs14. Can anyone shed some light on

While working on my NextJs project, I attempted to integrate Vercel Speed Insight import { SpeedInsights } from "@vercel/speed-insights/next" <SpeedInsights /> An error related to hydration is being returned. I am looking for an explana ...

disabling empty elements in a React JS JavaScript component

Currently, I am retrieving data from an API where users can post content up to 3 times. However, if a user has not posted three times, empty boxes with padding and background color will appear. I want to remove all elements that do not have any content wit ...

How to Uppercase the Keys of Each Object Element in Vue.js

I've got this particular item: { 'application': "BP 9ALT 8 123", 'address': "935 HAMPTON CRES", 'unit': null, 'status': "COMPLETED -ALL INSP SIGNED OFF" } I'm looking to tu ...

The configuration of the Braintree API client is incorrect: the clientApiUrl found in the clientToken is not valid

Error Found: Braintree API Client Misconfiguration - The clientApiUrl provided in the clientToken is invalid. Upon checking my browser log, I noticed this error. I am using a Node backend with an Angular front end and integrating Braintree javascript SDK ...

Issues with Node.js and AJAX

I am having trouble with my ajax request to retrieve data from node.js. The interaction between the two seems off, but I can't pinpoint where the issue lies. Below is the snippet of my ajax get request: $.get('/notificationsNumber', ...

The AngularJS directive that wraps the Kendo UI grid is unable to handle the kendoEvent properly

Our goal is to develop a displayBasket directive that will wrap kendoGrid and additional functionality. However, we are facing an issue where the gridDataBound function is not receiving kendoEvent. How can we resolve this problem? Here is an example in HT ...

What methods can I use to ensure precision in my raycasting while maneuvering the mouse over various sections of a LineSegment?

I have created a demonstration for drawing a LineSegment using three.js. I have implemented vertexColors in the material and assigned colors to the vertices. When hovering over different parts of the LineSegment, I change the color of the selected vertex ( ...