Updating scope variable in modal on button click - AngularJS

Question

The button click displays a pop-up but it does not show the dynamic value. My variable $scope.errorLog changes dynamically. Can I know where I am going wrong? The initial value for $scope.errorLog is "hello", it should change to world.

I have a controller as follows:

function service($http, $scope, $interval) {
  $scope.myfunction = function(arg1, arg2, arg3, arg4) {
    //Based on some of the variable values in my functions here, I need to 
    //display these variable values in a modal view in my html. The modal  
    //should appear on the click of a button.
    //End of my functions to set the variable values I should display.

    var err = document.getElementById("showErrors");

    err.onclick = function(){
        $scope.errorLog = "world"; // console.log prints the updated value
        var modal = document.getElementById('showLogs');
        modal.style.display = "block";
        document.getElementById('logsOkButton').onclick = function() {
           modal.style.display = "none";
}
}
      }
    }

My html looks like this for this dialog box :

<div id="showLogs" class="modal">
  <div class="infobox">
    <div class="container" id="logs">
      {{ errorLog }}
    </div>
    <br/>
    <div class="okbutton"><button id="logsOkButton">OK</button></div>
  </div>
</div>

The variable looks something like $scope.groups[arg4]["myfunc"][$scope.indexes[arg2]]; depending on the values arg4,arg2 which in turn depend on an other click. — Nagireddy Hanisha
– Nagireddy Hanisha, Commented May 10, 2017 at 5:02

dev8080 · Accepted Answer · 2017-05-10 07:18:21Z

2

You can put in into a single variable and manipulate it.

function service($http,$scope,$interval){

    $scope.myfunction = function(arg1, arg2, arg3, arg4){
        //Based on some of the variable values in my functions here, I need to 
        //display these variable values in a modal view in my html. The modal  
        //should appear on the click of a button.
        //End of my functions to set the variable values I should display.
        $scope.variableValue = $scope.groups[arg4]["myfunc"][$scope.indexes[arg2]];
        var err = document.getElementById("showErrors");
        err.onclick = function(){
                    console.log("error button clicked");
                    $("#showLogs").modal();
                };
        if(!$scope.$$phase)
                    $scope.$apply();
    }
    }

Also, you need not use direct css for a bootstrap modal, there are methods to do that programmatically.

<div id="showLogs" class="modal">
    <div class="infobox">
        <div class="container" id="logs">
            {{ variableValue }}
        </div>
    <br/>
    <div class="okbutton"><button id="logsOkButton" data-toggle="modal" data-target="#showLogs">OK</button></div>
    </div>
</div>

If you are editing the variable inside the function, like your edit shows, use $scope.$apply inside the onclick:

err.onclick = function(){
                $scope.errorLog = "world";
                $("#showLogs").modal();
                if(!$scope.$$phase)
                    $scope.$apply();
            };

edited May 10, 2017 at 7:18

answered May 10, 2017 at 5:12

dev8080

4,0051 gold badge15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nagireddy Hanisha Over a year ago

I have updated my question now. There seems to a small error that my updated variable value is not displayed in my html page. Please help

dev8080 Over a year ago

Adding if(!$scope.$$phase) $scope.$apply(); to the end of your function will make sure the update is reflected. Pls try it.

Collectives™ on Stack Overflow

Updating scope variable in modal on button click - AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related