[英]Not getting data in AngularJS Directive from the $scope model
Am working on a webpage using AngularJS. 我正在使用AngularJS开发网页。 On the webpage I am displaying charts using Chartist.js. 在网页上,我正在使用Chartist.js显示图表。 I want to populate the data needed by the Chartist chart object with a call to a REST service returning JSON data and feeding this to the Chartist chart data model. 我想通过调用返回JSON数据并将其提供给Chartist图表数据模型的REST服务来填充Chartist图表对象所需的数据。 The webpage just displays the chart inside a panel. 该网页仅在面板内显示图表。 I had a Angular controller that called the REST service, got the data and then I assigned this data to a $scope model. 我有一个称为REST服务的Angular控制器,获取了数据,然后将其分配给$ scope模型。 I wanted to pass this model data to the Chartist object. 我想将此模型数据传递给Chartist对象。 For this I had a directive applied to an element and passing the model data as an attribute value and in the directive, got this data, created a Chartist object and passed this model data. 为此,我将一条指令应用于元素,并将模型数据作为属性值传递,并在该指令中获取此数据,创建一个Chartist对象并传递此模型数据。 However the chart is not being displayed indicating that no/null data was passed to the Chartist object. 但是,该图表未显示,表示没有/空数据传递到Chartist对象。 What am I doing wrong here! 我在这里做错了! ?... Here is the html file ?...这是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>
The way you are accessing the value, you always get the initialized value not updated You find it empty because that was the initial value $scope.violationsData = {};
访问值的方式始终是获取未更新的初始化值。您发现它为空,因为那是初始值$scope.violationsData = {};
your value is updated after ajax success. 在ajax成功之后,您的值将更新。 The updated value will not propagated to your directive. 更新后的值不会传播到您的指令。 So to get updated value you can $watch
or pass the value using =
like 因此,要获取更新的值,您可以$watch
或使用=
like传递值
.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);
}
}
});
Note - Don't use something = someValue;
注意 -不要使用something = someValue;
use var like var something = someValue
otherwise this will create global variable. 像var something = someValue
一样使用var,否则将创建全局变量。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.