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.
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