The $scope variables in ngDialog are not being updated when using ngModel fields in $dialog with scope: $scope

I'm currently facing an issue with a controller that uses ngDialog.open to create a dialog box. I've assigned scope:$scope and set variables using ng-model within the popup $dialog, but for some reason, these values are not getting set in the controller's $scope. Although the ng-click function can successfully call a function within the $scope.

I've searched extensively on various platforms including here, Github, read through documentation, and experimented with examples provided on GitHub in the project.

Below are two JS Fiddles that showcase the problem. It seems like the binding with scope:$scope in .open() is one-way and doesn't reflect back onto $scope. However, .openConfrm() behaves as expected.

ngDialog.open() - http://jsfiddle.net/s1ca0h9x/ (FIXED!! works as expected)

ngDialog.openConfirm() - http://jsfiddle.net/tbosLoa9/ (works correctly)

var myApplication = angular.module('myApplication', ['ngDialog']);

myApplication.controller('MainController', function ($scope, ngDialog) {
$scope.FormData={newAccountNum:''};
$scope.ShowNgDialog = function () {
    ngDialog.open({            
        template: '<div><input type="text" ng-model="FormData.newAccountNum"/></div>',
        plain: true,
        scope:$scope

    });
}    

});

Answer №1

After making some adjustments to the original post, I have included it below. The link labeled FIXED demonstrates the functionality, while the second link shows it is not working properly. Fortunately, adding a dot (using a JavaScript object) resolves the issue.

ngDialog.open() - http://jsfiddle.net/s1ca0h9x/ (FIXED!! works as intended)

ngDialog.openConfirm() - http://jsfiddle.net/tbosLoa9/ (performs correctly)

var myApp = angular.module('myApplication', ['ngDialog']);

myApp.controller('MainController', function ($scope, ngDialog) {
    $scope.formData = {newAccountNum: ''};
    $scope.showNgDialog = function () {
        ngDialog.open({            
            template: '<div><input type="text" ng-model="formData.newAccountNum"/></div>',
            plain: true,
            scope: $scope

        });
    }    
});     

Answer №2

When using ngDialog, the scope is passed with properties of any types - http://jsfiddle.net/akgdxhd0/

var myApp = angular.module('myApp', ['ngDialog']);

myApp.controller('MainCtrl', function ($scope, ngDialog) {
  $scope.accountNumber = '';
  $scope.showNgDialog = function () {
    ngDialog.open({            
        template: '<div><input type="text" ng-model="accountNum"/></div>',
        plain: true,
        scope: $scope
    });
  };    
});

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

SelectBoxIt jquery plugin can be applied after the completion of populating options in the select element with AngularJS

Utilizing AngularJS, I am dynamically populating a select box with the code below: <select ng-model="department" ng-options="dept as dept.name for dept in departmentList" class="fancy"> <option value="">-- select an optio ...

Guide on utilizing vue-router and router-link for managing links that are dynamically generated within jquery modules like datatables

I spent some time trying to "integrate" datatables.net (https://datatables.net/) into a Vue app. After some trial and error, I came across advice suggesting not a direct integration approach, but rather utilizing jquery modules as they are and "hooking" t ...

Is there a way to programmatically select an HTML tab or filter in puppeteer?

I am currently developing a web scraping application for a website that utilizes tab headers to filter the contents of a table. In order to extract the data from the table, I need to first select a specific filter by clicking on a tab item. However, I&apos ...

What is the best way to retrieve ember model relation properties within routes and controllers?

Currently using ember 2.7.0, I am facing an issue while setting up my ember app with a currentUser.organization derived from the authenticated token. Although I can successfully resolve the currentUser, I am encountering difficulties in resolving the prope ...

Whenever I refresh my website after deployment, I encounter an empty error using the MERN stack

Here is a question I previously posted: How can I properly use the res.sendFile for my MERN APP, as I encounter an error every time I refresh, and it was resolved there. I encountered a similar issue here, even after following the same steps that worked b ...

What is the best way to extract a value from a JSON object?

I am having trouble deleting data from both the table and database using multiple select. When I try to delete, it only removes the first row that is selected. To get the necessary ID for the WHERE condition in my SQL query, I used Firebug and found this P ...

Is it possible to utilize AngularJS translate alongside Angular UI Router?

Just starting with Angularjs and keen to integrate angular-translate into my project Check out the site below After referring to its documentation, I encountered an error Uncaught TypeError: Cannot call method 'useStaticFilesLoader' of undef ...

What is the best way to have a single item in a list displayed in two columns?

Can the angular repeat achieve this functionality? I am looking to loop the two elements together. Any assistance would be greatly appreciated! Controller: $scope.date=[ {ID:1,Date:'2016-11-12'}, {ID:2,Date:'2016-11-15'}, ...

Utilize the ConditionExpression to update the status only when the current status is not equal to 'FINISH'

I'm struggling to create a ConditionExpression that will only update the status in my DynamoDB table called item. Here's what I have so far: dynamo.update({ TableName, Key, UpdateExpression: 'SET #status = :status', Exp ...

Is there a way to execute a JavaScript function by clicking on an anchor tag?

Many websites, such as StackOverflow, have attempted to address this particular issue. However, the explanations provided are complex and difficult for me to grasp. I am looking for someone who can help identify my mistakes and explain the solution in simp ...

Ensuring the accuracy of user input

Can someone assist me with comparing two dates in JSP? I need validation that alerts the user when a future date is entered. The start date or end date should not be in the future. The date format is 12-5-2011 10:51:49. Any help would be greatly apprecia ...

Display the content only if the filter is active and all nested conditions are met

I am currently using ng-repeat to dynamically create elements like this: <div class="items"> <!-- WANT TO HIDE THIS ENTIRE AREA IF THERE IS NO VALID ITEMS --> <b>Items</b> <span ng-repeat="item in items | orderBy:'pri ...

Upgrading from version 3 to version 5 in d3 does not just update the visualization but also introduces a new one

I attempted to upgrade this d3 visualization from version 3 to version 5, but instead of updating within the existing visualization, it continues to add another visualization below. I included: d3.select(".node").selectAll("*").remove(); d3.select(". ...

The content within an iframe is inaccessible through JavaScript when the onload event occurs

My current project involves integrating a payment service provider with 3Ds, and one of the steps in the process requires following specific instructions: Upon receiving the response to your initial API request, extract an URL along with some data. Embed ...

A method for determining the quantity of <li> elements within a <ul> container while applying specific conditions

I am currently using document.querySelectorAll('ul > li').length to count the total number of items in my list. However, I am wondering if there is a way to count only those items that meet a specific condition. For example: <ul> < ...

Utilizing JSX interpolation for translation in React JS with i18next

I am trying to utilize a JSX object within the interpolation object of the i18next translate method. Here is an example code snippet along with its result: import React from "react"; import {useTranslation} from "react-i18next&qu ...

Executing a Databind function using the keypress method in jQuery

On my simple page, I have a repeater being populated by a C# databind method. The page includes a search textbox that performs real-time searching as you type. This functionality is achieved by utilizing the rowfilter in the databind method to filter the r ...

Is it possible for me to manage events while executing Selenium tests?

Being new to Selenium, I am a JavaScript programmer interested in handling JavaScript events within my Selenium-2 tests (JUnit). Upon joining a team that already has existing tests with "waitForSomethingToBeRendered" methods, I am curious if there is a way ...

Interactive messages displayed based on cursor movement with jQuery

Seeking advice here. I need something similar to a tooltip, but not quite. My website has numerous links scattered around. When these links are clicked, they trigger an ajax form to load at the bottom of the page. Sometimes, the form can be located far dow ...

Achieving left alignment for Material-UI Radio buttons: Float them left

Click here to view the demo https://i.stack.imgur.com/Yt4ya.png Check out the demo above to see the code in action. I'm currently struggling to align the radio buttons horizontally, wondering if there's an easier way to achieve this using Mater ...