I'm pretty new to this, but I've been working on a basic Angular app and I am running into a small problem. I have a directive which is supposed to receive data from the following block of html:
<div ng-controller="LeagueShowController">
{{ViewModel.Price}}
<bars-chart chart-data="ViewModel.price"></bars-chart>
</div>
Where the first instance of "ViewModel.Price" returns the correct array of prices, but the second instance within my directive element (bars-chart) returns an empty array. Here is what my directive looks like (I've removed a little code to simplify it):
"use strict";
(function(){
angular
.module("leagues")
.directive('barsChart', function ($parse) {
var directiveDefinitionObject = {
restrict: 'E',
replace: false,
scope: {data: '=chartData'},
link: function (scope, element, attrs) {
console.log(scope.data);
}
};
return directiveDefinitionObject;
});
}());
I changed the chart-data="ViewModel.price" to simply chart-data="ViewModel" to see what I get, and here is where my problem occurs. When this is changed, and I console.log scope.data in the directive again, I get an object with and array of zero. However, if I click into that object, I see the information I want. See below for details. Is there a step I'm missing to break down the object further in the directive?
Object {league: k, Price: Array[0]}
league: k
Price: Array[4]
EDIT: To clarify, this is not just a console issue. When I try to actually return the data in my directive, it still returns an empty array when I call "ViewModel.Price".
Controller
(function(){
angular
.module("leagues")
.controller("LeagueShowController", [
"$stateParams",
LeagueShowControllerFunction
]);
function LeagueShowControllerFunction($stateParams,scope){
var self = this;
this.Price = [1,2,3,4];
}
}());
This is my first post here on SO, so please let me know if I can do a better job posting a question like this. And thank you!