Angular - ng-repeat中的范围问题

时间:2015-09-01 18:46:19

标签: angularjs scope ng-repeat

我有一个ng-repeat工作正常,当我选择一个项目时动态添加项目到列表。它正确打印值。但是当我添加一个指令(具有隔离范围)时,它只打印第一个项目的详细信息。

html的

<div class="wrapper wrapper-content" ng-controller="ngDygraphCtrl">
<div class="col-sm-3 pull-right" >
        <br></br>
        <label>Add Graphs</label>
        <select ng-options="size as size.name for size in graphsx " ng-model="selected" ng-change="addGraph()"></select>
</div>
<div ng-repeat="chart1 in chartsx track by $index" >
        <br/>
         {{chart1.size}}-{{chart1.name}} {{$index}}
        <div class="row" >
            <div class="{{chart1.size}}">
                <div class="ibox float-e-margins">
                        <div class="ibox-title">
                                <h5>Line Chart {{chart1.size}}-{{chart1.name}} {{$index}}</h5>
                                <div ibox-tools></div>
                        </div>
                        <div class="ibox-content">
                            <div class="dynamic-chart">
                                 <ng-dygraphs style="height:350px;" data="graph.data" options="graph.options" legend="graph.legend" > </ng-dygraphs>
                             </div>
                        </div>
                </div>
            </div>
       </div>
 </div>

这项工作罚款,如果我注释掉ng-dygraphs ,它会打印name1,name2等。

我很确定隔离范围会导致一些问题,但我不知道如何解决它。

.controller:

.controller('ngDygraphCtrl', function ($scope, $http, $timeout, $modal, $interval) {
$scope.graph = {
        data: [ "X"
        ],
        options: {
           axisLineColor: "#FFFFFF",
           drawPoints: true,
           pointSize : 1,
           strokeWidth : 0.5,
           connectSeparatedPoints: true,
           axes: {
                     x: {
                         valueFormatter: Dygraph.dateString_,
                         axisLabelFormatter: Dygraph.dateAxisFormatter,
                         ticker: Dygraph.dateTicker
                     }
                 },
            colors : ["#ffff00",  "#FF3300", "#7920FF", "#ff0000", "#ff00ff"] 
        } ,
        legend: { 
        } 
    };

    $scope.chartsx = [];
    $scope.graphsx = [];

    $scope.graphsx = [{name: "name1", size: "col-lg-12"}, {name: "name2", size: "col-lg-6"}]
    // Get User state
    $scope.addGraph = function() {
        var sel = $scope.selected.name;
        for ( var ss in $scope.graphsx) {
            if ( $scope.graphsx[ss].name == sel ) {
                $scope.chartsx.push($scope.graphsx[ss]);
               // $scope.charts.push({name: sel, size: "col-sm-6"});
            }
        }        
    }
    $scope.getData = function() { $http.get('http://localhost:8080/getDygraphData?q=' + queries)
            .success(function(data) {        

            $scope.graph.data = data;

        }).error(function (data, status){
            console.log("Error status : " + status + " " + data);
        }) };

var promise = $ interval($ scope.getData,3000); }

指令:链接到ng-dygraph指令(此处发布太大)

linux.die.net/man/3/pthread_mutexattr_setpshared

1 个答案:

答案 0 :(得分:0)

正如@NewDev所暗示的,最可能的罪魁祸首是声明:

 <ng-dygraphs style="height:350px;" data="graph.data" options="graph.options" legend="graph.legend" > </ng-dygraphs>

具体来说,您正在使用似乎不存在的对象图形创建指令。您的图表范围没有定义变量。

我假设您复制了here中的代码,但您需要传递给数据,选项和图例的内容是在您的范围内定义的值。

这有意义吗?