Although several people have raised the same issue before and I've attempted their solutions, I still can't seem to resolve it. My problem involves using d3, but I keep encountering this error:
app.js
var app = angular.module('myApp', []);
controller
app.controller('d3Ctrl', ['$scope', function($scope) {
$scope.myData = [10,20,30,40,60];
}]);
directive:
app.directive('barsChart', function ($parse) {
//explicitly creating a directive definition variable
//this may look verbose but is good for clarification purposes
//in real life you'd want to simply return the object {...}
var directiveDefinitionObject = {
//We restrict its use to an element
//as usually <bars-chart> is semantically
//more understandable
restrict: 'E',
//this is important,
//we don't want to overwrite our directive declaration
//in the HTML mark-up
replace: false,
link: function (scope, element, attrs) {
//converting all data passed thru into an array
var data = attrs.chartData.split(',');
//in D3, any selection[0] contains the group
//selection[0][0] is the DOM node
//but we won't need that this time
var chart = d3.select(element[0]);
//to our original directive markup bars-chart
//we add a div with out chart stling and bind each
//data entry to the chart
chart.append("div").attr("class", "chart")
.selectAll('div')
.data(data).enter().append("div")
.transition().ease("elastic")
.style("width", function(d) { return d + "%"; })
.text(function(d) { return d + "%"; });
//a little of magic: setting it's width based
//on the data value (d)
//and text all with a smooth transition
}
};
return directiveDefinitionObject;
});
index.html
<head>
<style>
.chart {
background: #eee;
padding: 3px;
}
.chart div {
width: 0;
transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 5px;
color: white;
box-shadow: 2px 2px 2px #666;
}
</style>
<!-- Bring in Bootstrap css so things look nice by default -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-resource.js"></script>
<script type= "text/javascript" src="app.js"></script>
<script type= "text/javascript" src="d3controller.js"></script>
<script type= "text/javascript" src="d3directive.js"></script>
</head>
<body>
<div ng-controller="d3Ctrl">
<bars-chart chart-data="myData" ></bars-chart>
</div>
</body>
I stumbled upon this example online and implemented it, yet it's causing me some trouble: Error: ng:areq Bad Argument Argument 'd3Ctrl' is not a function, got undefined I'm at a loss as to what might be incorrect, everything seems fine without this addition. Are there any insights or suggestions anyone could offer? Any assistance would be greatly appreciated!