AngularJS无法将变量传递给HTML页面

时间:2017-10-20 15:43:04

标签: html angularjs

数据集变量存在(我可以看到它与console.log()),但它没有传递给html页面。我相信,我正确设置了控制器和应用程序,但无法弄清楚我做错了什么。遗漏了其他不会对此产生影响的代码,以便于阅读。

<!DOCTYPE html>
<html lang="en" ng-app="ValidationApp">

<body ng-controller="Test1">

 <div class="container-fluid" style="position:absolute;">

                    <div class="btn-group-vertical text-center pull-left">
                        <h3>Data Visualization</h3>
                        <button type="button" class="btn-danger" id="visualize" data-toggle='modal' data-target='#d3_choose' onclick="runfile('visualize','')"><i class="fa fa-area-chart"></i>  Visualize Results</button><br>
                    </div>

                </div>
                <div style="height:70vh;font:16px/26px Georgia, Garamond, Serif ;overflow:auto; background-color:white;padding-top:30px;position:absolute;margin-left:-40px;" class="col-lg-7 col-lg-push-3">
                    <pre>{{message1}}
                </div>

            </div>
    </div>
<div id="d3_choose" class="modal fade" role="dialog" ">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header" style="background-color:rgba(147, 147, 147, .5);">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title style1" style="font-size:24px;">Choose the Validation results to visualize</h4>
            </div>
            <div class="modal-body" p>
                <!--<form class="form-group" name="file_used" id="file_used">-->
                        <label ng-repeat="dataset in datasets">Choose a dataset
                            <input type="radio" ng-value="dataset" value="dataset">
                                   <!--name='results_file' ng-model="results_file" required>-->
                            {{dataset}}
                        </label><br>
                        <h3 ng-show="datasets.length==0">No validation results available using {{folder_name}} folder.</h3><br>
                <!--</form>-->
                <button type="button" class="btn-danger" id="visualize2" data-toggle='modal' data-target='#d3_viz'
                        ng-disabled="file_used.$invalid" onclick="data_viz('file_used')"><i class="fa fa-check"></i>  Visualize</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Exit</button>

            </div>
        </div>

    </div>
</div>

    $(".modal").on("hidden.bs.modal", function(){
        $(".modal-body input").val("")
        $(".modal-body select").val("")
    });

    ////////////////////////////////////////
    var app=angular.module('ValidationApp',[]);

        app.controller('Test1', function($scope,$http) {
            //will find current ip address wo hardcoding
            var socket = io.connect();

            socket.on('messages', function(data) {
                if ($scope.message1 == null) {
                    $scope.$apply(function(){$scope.message1 = data})
                } else {
                  $scope.$apply(function(){$scope.message1 = $scope.message1 += data;})
                }
            });

            socket.on('file_list', function(data) {
                $scope.$apply(function () {$scope.folder_name = data[0]})
                data.shift()
                $scope.$apply(function () {$scope.datasets = data})
            });

1 个答案:

答案 0 :(得分:0)

您的意思是定义2个ng-app并且相同的ng-controller定义了2个不同的时间?