按钮单击时更新模态中的范围变量 - AngularJS

时间:2017-05-10 04:49:49

标签: html angularjs button

按钮单击会显示弹出窗口,但不显示动态值。我的变量$ scope.errorLog动态变化。我能知道我哪里出错吗? $ scope.errorLog的初始值是“hello”,它应该更改为world。

我有一个控制器如下:

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";
}
}
      }
    }

我的html在这个对话框中看起来像这样:

<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>

1 个答案:

答案 0 :(得分:2)

您可以输入单个变量并对其进行操作。

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();
    }
    }

此外,您不需要使用直接css作为引导模式,有方法可以通过编程方式执行此操作。

<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>

如果您正在编辑函数内部的变量,就像编辑节目一样,请在onclick中使用$ scope。$ apply:

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