Friday, 15 March 2013

javascript - Angular accessing scope attribute -



javascript - Angular accessing scope attribute -

i have below code directive. i'm trying pass scope controller directive, , seems passing (console.log(scope); works fine). when seek access scope.data attribute, looks should homecoming array in console.log scope, returns undefined. why , how can prepare this?

myapp.directive('d3cloud', ['$window', 'd3service', 'd3cloud', function($window, d3service, d3cloud) { homecoming { // restrict usage element/attribute restrict: 'ea', // manage scope properties scope: { // bi-directional info binding data: '=', // bind dom attribute label: '@' }, // link dom link: function(scope, element, attrs) { // load d3 service d3service.d3().then(function(d3) { // create svg variable var svg = d3.select(element[0]) .append('svg') .style('width', '100%') .append('g'); // re-render on window resize window.onresize = function() { scope.$apply(); }; // phone call render function on window resize scope.$watch(function() { homecoming angular.element($window)[0].innerwidth; }, function() { // works fine! console.log(scope); // returns undefined! console.log(scope.data) scope.render(scope.data); }); ...

added html:

<div class="inner-module" ng-controller="downloadscloudctrl"> <div class="module-graph"> <d3-cloud data="d3data"></d3-cloud> </div> </div> important edit:

the problem has been getting weirder. refreshed page, , grabbed info perfectly. refreshed 1 time again , received undefined again. i'm going seek alter variable name info else.

edit #2:

tried changing variable name , doesn't seem recognize parameter other data... weird...

problem:

the directive loading before http service had finished loading data.

solution:

add ng-if conditional create sure info has loaded before initiating directive.

markup:

<div class="module-graph" ng-if="dataloaded"> <d3-cloud data="d3data"></d3-cloud> </div>

within controller:

requestservice.getp2pkeyworddata(month, year).then(function(data) { $scope.d3data = data.data; $scope.dataloaded = true; });

javascript angularjs angularjs-scope

No comments:

Post a Comment