没有从$ scope模型获取AngularJS指令中的数据

正在使用AngularJS在网页上工作。在网页上，我使用Chartist.js显示图表。我想通过调用返回JSON数据的REST服务并将其提供给Chartist图表数据模型来填充Chartist图表对象所需的数据。该网页只是在面板内显示图表。我有一个叫做REST服务的Angular控制器，得到了数据，然后我将这些数据分配给$ scope模型。我想将这个模型数据传递给Chartist对象。为此，我有一个指令应用于元素并将模型数据作为属性值传递给指令，获取了这些数据，创建了Chartist对象并传递了此模型数据。但是，图表未显示，表示无/空数据已传递给Chartist对象。我在这里做错了什么！？...下面是HTML文件

<!DOCTYPE html> 
<html ng-app="codeQualityApp"> 
<head> 
<title>First Test</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script src="lib/angularjs/angular.js"></script> 
<!--<script src="controllers/client.controller.codequality.js"></script>--> 
<link href="css/bootstrap.css" rel="stylesheet" /> 
<link href="css/bootstrap-theme.css" rel="stylesheet" /> 
<link href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" /> 
<script> 
    angular.module("codeQualityApp",[]) 
    .controller('codeQualityCtrl',function($scope,$http) 
    { 
    $scope.violationsData = {}; // Model data in the format below as needed by the Chartist object 
    // $scope.violationsData.labels = ["Clang","MySQL","JDK 8"]; 
    //$scope.violationsData.series= [[369492,167703,159215]]; 

    $http.get("http://localhost:5001rest/codequality/list") // REST call 
    .success(function(data,status,header,config) 
    { 
     var cq_violations = angular.fromJson(data); 
     violationsData = {}; 
     violationsData.labels = new Array(); 
     violationsData.series = new Array(); 
     violationsData.series[0] = new Array(); 
     for(var i =0; i < cq_violations.length; i++) 
     { 
     violationsData.labels[i] = cq_violations[i].name; 
     violationsData.series[0][i] = parseInt(cq_violations[i].msr[0].val,10); 
     } 
     $scope.violationsData = violationsData; // Populating the model data 
    }) 
    .error(function(data,status,header,config) 
    { 
     $scope.error = data; 
    }); 
    }) 
    .directive("cqChart",function() 
    { 
     return function(scope,element,attrs) 
     { 
      chartdata = scope[attrs["chartdata"]]; // Accessing the attribute value 
      console.log("ChartData:",chartdata); // Am getting empty object here!!! 
      new Chartist.Bar('.ct-chart', chartdata); // Bar chart with the data as in chartdata 
                       // but chart not displayed as chartdata is empty 
                       // object!! 
     } 
    }); 


</script> 
</head> 

<body ng-controller="codeQualityCtrl"> // Controller 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Dashboard</a> 
    </div> 
    <div> 
     <ul class="nav navbar-nav"> 
     <li><a href="master.html">Master</a></li>  
     <li><a href="#">Project/Features</a></li> 
     <li><a href="build.html">Build</a></li> 
     <li class="active"><a href="#">Code Quality</a></li> 
     <li><a href="#">Test Execution</a></li> 
     <li><a href="#">Deployments</a></li> 

     </ul> 
    </div> 
    </div> 
</nav> 

<div class="alert alert-danger" ng-show="error"> 
Error ({{error}}). CodeQuality data was not loaded. 
<a href="/app.html" class="alert-link">Click here to try again</a> 
</div> 

<div class="panel panel-default" ng-hide="error"> 
    Data : {{violationsData}} <!-- Got proper data here --> 
<!-- Display the chart here --> 
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> 
<div class="ct-chart ct-perfect-fourth"></div> 
<cq-chart chartdata="violationsData"> <!-- custom directive ... not working... data is empty --> 
</div> 

</body> 
</html>

来源

2015-11-05 satsun

-1

您正在访问的值的方式，你总是初始化值没有更新你会发现它空的，因为这是初始值$scope.violationsData = {};你的价值被更新后阿贾克斯成功。更新的值不会传播到您的指令。因此，要得到更新值可以$watch或通过使用=值一样

.directive("cqChart", function() { 
    return { 
     restrict: 'E', 
     scope: { 
      // this will create isolate scope and two way bind between 
      // your controller's violationsData and directive's chartdata 
      chartdata: '=' 
     }, 
     link: function (scope, element, attrs) { 
      //now this will be accessable through scope 
      console.log("ChartData:", scope.chartdata); 
     } 
    } 
});

注意 - 不要使用something = someValue;使用VAR像var something = someValue否则这将创建全局变量。

来源

2015-11-05 10:42:07 Reza

谢谢Reza。我确实试图去做你已经表明过的东西，但不知何故，我在'范围：{..'行...中得到了语法错误（缺少;语句之前），并且所有的语法都是正确的。这是奇怪的，但只是无法弄清楚......最后，实际上，我完全删除了控制器，只有指令，并在这样的指令中有REST调用： – satsun

这很奇怪！你的最新指令代码是怎样的？ – Reza

.directive（“cqChart”，function（$ http） {0122}成功（功能（数据，状态，标题，配置） { var cq_violations = angular.fromJson（data）; var violationsData = {}; //填充的违规数据.... console.log（“ChartData：” ，violationData）; new Chartist.Bar（'.ct-chart'，violationsData）; }） } }）;在HTML – satsun

没有从$ scope模型获取AngularJS指令中的数据

回答

相关问题