angularjs $scope.apply() dynamic Inputs

Question

Angular Experts -

I have a AngularJS SPA and in that there is a functionality on the index.html page to open a angular-ui modal dialog and based on the user selection from the modal dialog, I am required to populate a 3 dynamically generated input fields in the index.html. I do know the id pattern of the input fields that are dynamically generated and can gain reference to them using jqLite to set the values.

In the index.html / main page

<input type="text" class="form-control" id="txt1" placeholder="txt1" ng-model="txt1">
<input type="text" class="form-control" id="txt2" placeholder="txt1" ng-model="txt2">
<input type="text" class="form-control" id="txt3" placeholder="txt1" ng-model="txt3">

After selecting the data from the modal-instance:

$scope.ok = function() {
        angular.element(document.querySelector('#txt1')).val('Value from modal for txt 1');
        angular.element(document.querySelector('#txt2')).val('Value from modal for txt 2');
        angular.element(document.querySelector('#txt3')).val('Value from modal for txt 3');

      // $scope.$apply() doesn't work as it is already in progress
      // how to update angular context with these changes?
    
        $modalInstance.close();
};

However, none of these values applied are getting binded to the angularjs scope. I do understand that this is because of not going through the angular's $scope / $digest. So, I tried calling $scope.$apply() which is obviously not working because the place where I put it is already being evaluated as a part of the $digest (hopefully I worded it right).

I have made a jsfiddle to show what situation I am in.

I have read all around about the $scope and $digest and have the theoretical knowledge. I am unable to figure out how do I apply this knowledge to resolve this situation and perform a $scope.$apply() with my dynamically assigned input values?

Please help.

score 3 · Accepted Answer · edited May 23 '17 at 12:20

3

For one thing, never use jQuery with Angular. When you understand Angular enough to be able to challenge the "never" part of my assertion, then it's OK to look into how jQuery plays with Angular.

jQuery, or any kind of attempt to get/set DOM elements from the controller will get you in deep waters. This SO answer is a good place to start.

Specifically to your question, $modal provides you with modalInstance.result, which, from the view controller can get any result passed to it from the modal controller via $modalInstance.close(result) This is how you use it:

in the modal controller:

$modalInstance.close({txt1: "value from txt1", txt2: "something else"});

And this is how you get it in the view controller:

var modalInstance = $modal.open(...);
modalInstance.result.then(function(result){
  $scope.txt1 = result.txt1;
  $scope.txt2 = result.txt2;
});

plunker

edited May 23 '17 at 12:20

Community

1
1

answered Mar 05 '15 at 20:06

New Dev

48,427
12
87
129

That SO answer you gave, I read it several times and one more time now. And from your answer, I realized that I got carried away one more time with jQuery approach. The angular way to assign data to the dynamic text boxes is not to assign by id reference, but rather find the ng-model reference and update it, in this case "$scope.txt1" etc. However, I can only wish my ng-model references were that flat in my json object (which they aren't). Also, I was lazy to use the modalInstance.result.then in my jsFiddle, but did use it in my original code. Thanks for that correction. Appreciate the help! – Satya Mar 05 '15 at 20:59
1

Yeah, whenever you feel "ah, I could just do get/set something with jQuery" - stop and consider this a warning sign that you probably not fully understanding Angular yet – New Dev Mar 05 '15 at 21:11

angularjs $scope.apply() dynamic Inputs

1 Answers1