ngDialog $scope variables not being updated by ngModel fields in $dialog when using scope: $scope

Question

I have a controller that creates a dialog with ngDialog.open. I assign scope:$scope and set scope variables with ng-model in the popup $dialog. However the values are not set in the controller $scope. The ng-click function is able to call a function in the $scope.

Is there something I am missing, I have searched quite a bit on here and github, read the docs and worked with all the examples provided on github in the project.

JS Fiddles below explains. It shows that the scope:$scope is not what it seems for .open(). It is a one way binding and does not go back to $scope. .openConfrm() seems to have the expected behavior.

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

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

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

    });
}

});

how about a [jsfiddle](http://jsfiddle.net) or [plunker](http://plnkr.co/edit/?p=preview)? — bluetoft, Sep 08 '14 at 01:59
I have also posed this question to the ngDialog owner https://github.com/likeastore/ngDialog/issues/74 — howserss, Sep 08 '14 at 15:02
I don't see why you should edit the ngDialog source... why don't you directly assign $rootScope.newAccountNum when the Modal promise is resolved, instead? — digital illusion, Sep 09 '14 at 11:39
This jsFiddle using ngDialog.openConfirm() seems to work better then ngDialog.open(). http://jsfiddle.net/rkcuLgsw/ — howserss, Sep 09 '14 at 14:22
I have resolved the issues for .open() and .openConfirm(). If I create varaibles using a javascript object then things wire up correctly. If its a stand alone variable like $scope.accountNum then it does not wire up using ng-model. — howserss, Sep 09 '14 at 14:42
I am unable to anwser questions on SO so if someone reads this please mark as answered. — howserss, Sep 09 '14 at 14:53

score 14 · Accepted Answer · edited Dec 10 '15 at 13:23

14

I have edited the original post and added it below. The FIXED link shows it working and the second shows it broken. Adding a dot (using a javascript object) fixes the problem.

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

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

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

        });
    }    
});

edited Dec 10 '15 at 13:23

Kailas

7,350
3
47
63

answered Sep 17 '14 at 01:38

howserss

1,139
1
8
12

does it have to be plain template? how about when using html file as template? i tried using external file but it's not working – Agung Setiawan Nov 26 '15 at 09:46
They show examples of templates using external html files on the ngDialog github site. It uses the same template: parameter. Ex template: 'external.html' – howserss Nov 27 '15 at 12:08
I get the same werd problem, variable are not updated in the parent controller. So we cannot use variable from $scope who are not object (like $scope.newAccountNum ) ? – AlainIb Sep 01 '16 at 08:00
That seems to be the work around. You must use a dot. What I mean is a JavaScript Object like FormData.newAccountNum. – howserss Sep 26 '16 at 12:28

score 0 · Answer 2 · answered Sep 09 '14 at 15:16

0

ngDialog passes scope with properties of any types - http://jsfiddle.net/akgdxhd0/

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

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

answered Sep 09 '14 at 15:16

Kosmetika

20,774
37
108
172

You should check your example against mine. At least on safari and IE two way binding does not work with your jsfiddle. My examples work now. After you open the dialog and type in the input field that is the difference between your example and mine. Give it a try. – howserss Sep 10 '14 at 10:31
how to pass vm to scope , i am not using $scope in controller . i tried scope:vm. but i doesnt work. – Arash Apr 26 '16 at 09:31
your fiddle don't work for me on mozilla. i edit data in the popup but the accountNum is not updated in the parent controller ! – AlainIb Sep 01 '16 at 07:58

ngDialog $scope variables not being updated by ngModel fields in $dialog when using scope: $scope

2 Answers2

Linked