The controller is unable to read the property 'goals' as it is undefined in AngularJS resolve

Hello everyone, this is my first post on stackoverflow. I have encountered an issue in my code that is causing an error which reads like this:

TypeError: Cannot read property 'goals' of undefined
at $scope.addValue.$modal.open.resolve.goals (app.js:59) at Object.invoke (angular.js:3762) at ui-bootstrap-tpls-0.12.1.js:2118 at Object.forEach (angular.js:329) at getResolvePromises (ui-bootstrap-tpls-0.12.1.js:2116) at Object.$modalProvider.$get.$modal.open (ui-bootstrap-tpls-0.12.1.js:2151) at Scope.$scope.addValue (app.js:53) at Parser.functionCall (angular.js:10294) at angular.js:18229 at Scope.$get.Scope.$eval (angular.js:12075)

In my code, 'goals' is similar to 'items' in some other code I saw.

The error is originating from the ctrlAddValue controller where there is a reference to 'goals': function($scope, $modalInstance, goals)

If anyone has any insights or solutions, I would greatly appreciate it!

Here is the portion of the code causing the problem:

app.controller("ctrlCtx", function ($scope, $state, $stateParams, $modal,     $window) {

$scope.goals = "A good goal";

     $scope.addValue = function (size, scope) {
        var modalInstance = $modal.open({
            templateUrl: 'templates/addValue.html',
            size: "lg",
            controller: "ctrlAddValue",
            resolve: {
                goals: function () {
                    return $scope.goals;
                }
            }
        })
        modalInstance.result.then(
             function (selectedItem) {

              }, 
              function () {

              });
     }; });

This section shows the code for the 'ctrlAddValue' controller.

app.controller('ctrlAddValue', function ($scope, $state, $modalInstance, goals) {

$scope.addValue = function(){

    $modalInstance.close();
};

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

 });

This code snippet is based on the ui.bootstrap demo for modals.

Answer №1

const appCtrl = angular.module("appCtrl", []);

appCtrl.controller("ctrlCtx", function ($scope, $state, $stateParams, $modal,     $window) {

$scope.goals = "A great objective";

     $scope.addValue = function (size) {

When calling the addValue function, make sure not to pass $scope as a local parameter to avoid it being undefined.

Simply remove the $scope parameter from the addValue function for clarity and proper functionality.

Answer №2

To configure your ctrlCtx properly, follow these steps:

 app.controller("ctrlCtx", function ($scope, $state, $stateParams, $modal,     $window) {

        $scope.goals = "A good goal";

             $scope.addValue = function () {
                var modalInstance = $modal.open({
                    templateUrl: 'templates/addValue.html',
                    size: "lg",
                    controller: "ctrlAddValue",
                    resolve: {
                        goals: function () {
                            return $scope.goals;
                        }
                    }
                })

             }; 
        });

Once this is set up, the variable "goals" will be accessible in ctrlAddValue

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

Unable to store multiple users in MongoDB

Currently, I am encountering an issue with passportJS not saving more than one user to MongoDB while using nodeJS with the expressJS server framework. Initially, I successfully set up email registration with passport-local. However, when I added passport- ...

What is the best way to utilize a JavaScript variable as a background within an inline style sheet?

I have a fun project for this evening - I am trying to make my website load a different background image every time the page is refreshed. Earlier on in this project, I managed to make the background interact with window size and screen resolution similar ...

AngularJS: Identifying the position (ON/OFF) of ui-switch

I'm having trouble figuring out how to identify the position of my UI switch (true/false) in my JavaScript file. Here is my HTML file with the UI switch: <ui-switch ng-model='onOff'></ui-switch> And here is my controller for t ...

The title of the Electron application remains consistent

My application is being packaged using electron-packager, but it's not changing its name and still displays "Electron." It's supposed to use the productName in my package.json file, but for some reason, it doesn't change. Even after creati ...

Switch between toggling tasks in Vue does not seem to be functioning as

I'm reaching out again because I'm struggling to figure out what I'm doing wrong. I followed a tutorial step by step but the code isn't working as expected. My goal is to toggle between marking tasks as done and not done. When I test th ...

Tips for adding text to your d3 force layout

Looking to incorporate text into a force layout using SVG. I've created an svg group and added a circle successfully, but having trouble with the text. Here's the code snippet: var node = svg.selectAll("g") .data(measures.nod ...

AngularJS Bootstrap: Generating Pop-up Windows

In my AngularJS & Bootstrap application, I implemented a popup that appears when an image is clicked. However, the issue I'm encountering is that the same image and polygon are displayed in each popup. I am looking to have each image paired with its o ...

The search function is currently limited to only searching the first column of the HTML table instead of searching the entire table

Having some issue with the search and filter options on my table. It seems like the search function only works for the first column "ID". I would like it to work for all columns, especially the names and pincode columns. Any help would be appreciated. Than ...

Is it possible for Mongoose to create a duplicate key when creating a new document

When I define a model in mongoose and then create a document using code similar to the one below: const Model = require("./Model") const newModelItem = new Model({ ...data }) await newModelItem.save() I have observed that there is an ID field already p ...

Having trouble retrieving the pathname of a nested route within middleware.js in next js version 14

I am currently referring to the official App Router documentation for Authentication on this page My goal is to extract the pathname from the next URL export function middleware(request) { console.log('now we are in middleware'); const { ...

Tips for identifying visible elements on a webpage with JavaScript

My #diagram div is larger than the visible area in my browser and contains up to 1500 "boxes" as div elements. I am looking for a way to determine which of these 1500 boxes are actually visible to the user so that I can dynamically load them using ajax. Cu ...

Discovering the method to retrieve the values from 2 dropdown lists that are populated by a JavaScript function

I have a pair of dropdown lists in a JSP file labeled 'speciality' and 'super_speciality'. Clicking on an option in the 'speciality' dropdown list dynamically populates options in the 'super_speciality' dropdown list ...

Error encountered: The object 'Sys' is not defined in the Microsoft JScript runtime

I currently have a webpage with the following code snippet: <script type="text/javascript" language="javascript"> /// <reference name="MicrosoftAjax.js" /> Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler ...

Manipulating SVG image color using JavaScript

Is there a way to change the colors of an svg image using Javascript? Perhaps by loading it as an object and accessing the color/image data? I would greatly appreciate any responses or tips on this matter! ...

How can an ASP.net Razor application utilize Bootstrap, CSS, or JS to quickly rearrange table columns by moving them left and right? Is there a simple method to reorder columns dynamically in real-time?

Looking for a way to dynamically move columns in an HTML table when the user clicks on a left/right caret within the column header. It seems like a challenging task, but I'm determined to make it work! Any tips or suggestions on how to successfully im ...

Tips for automatically updating the time in a React application while utilizing the 'date-fns' library

I've been working on my personal Portfolio using React and I'm looking to add a feature on the landing page that showcases my local time and timezone to potential recruiters. However, there's a small hiccup in my implementation. The displaye ...

What's the best way to make the background image fill the entire page and have the buttons perfectly centered on top of the image?

I am currently working with Angular version 13 and have included the following CSS code. .image{ min-height: 100vh; background-position: center center; background-repeat: no-repeat; background-size: cover; back ...

Create a cookie that expires after 1 hour and verify its presence upon loading the page

Looking to add a subtle animation for new site visitors without it showing up every time they switch between pages? You're not alone - I'm experiencing the same issue. Check out my code snippet: $(document).ready(function() { "use strict"; ...

Asynchronous update of array elements - lack of firing watch events

I have recently developed a component that showcases previews of blog articles. This particular component includes pagination functionality, where selecting a new page triggers the refreshment of the article previews array. The list of articles is obtained ...

Using Object.create to establish multiple prototypes in JavaScript

I am trying to have my child object inherit the prototypes of multiple parents, but the following methods do not seem to work: child.prototype = Object.create(parent1.prototype, parent2.prototype); and also this: child.prototype = Object.create(parent1 ...