javascript - AngularJS element directive with ng-init runs before view renders -

i attempting loop through array , create multiple instances of custom directive creates different graphs based on variables on rootscope. works fine except when try place in view , call ng-init method on scope , pass arguments.

what finding ng-init seems run before (and think ng-init wrong approach), causes errors because variables being set in method aren't set yet when ng-init runs in view.

when first load index view, go view, well, when try load view first or reload it, getting errors. ng-init trying call chart() method before else runs.

on index view, have chart in modal gets called onclick, ng-init not needed, therefore works great.

i little stuck , need advice on "right" or better way accomplish this.

on detail view, need loop across array 4 charts based on 4 different objects of data.

the data static file now, prototype.

my code this: view:

<div id="chart_list">   <div class="chart" ng-repeat="val in ['abc', 'def', 'ghi', 'jkl']" ng-init="chart('line', val, itemid, val)">     <h3>{{val | uppercase}}</h3>     <chart/>   </div> </div> 

appcontroller method:

// data set chart consumption $scope.chart = function(chart, kpi, socid, chartid) {  $rootscope.visualize = {}; $rootscope.visualize.chart = chart; $rootscope.visualize.chartid = chartid; $rootscope.visualize.val = val; $rootscope.visualize.item = $rootscope.itemlist[itemid]; $rootscope.visualize.valname = $rootscope.visualize.item[val].name; 

};

detailview controller:

app.controller('itemdetailcontroller', function($scope, $rootscope, $routeparams, itemlist) {    var itemid = $scope.itemid = $routeparams.itemid;    itemlist.get({}, function(res) {     $rootscope.itemlist = res.data;     $scope.item = $rootscope.itemlist[itemid];   });   }); 

service:

app.factory('itemlist', function($resource){   return $resource("/api/item-list.json"); }); 

directive:

app.directive('chart', function() {   return {     restrict: 'e',     link: function(scope, element, attrs){        if ($(window).width() <= 1200){         var width = 300;       } else {         var width = 450;       }        var visualize = scope.visualize;       var data = visualize.soc[visualize.val].data;       var numticks = object.keys(data).length;        element.append('<div class="chart_container"><div id="y_axis' + visualize.chartid +'" class="y_axis"></div><div id="chart' + visualize.chartid + '" class="chart"></div><div id="x_axis' + visualize.chartid + '" class="x_axis"></div></div>');       element.append('<div id="legend_container' + visualize.chartid +'" class="legend_container"><div id="smoother' + visualize.chartid +'" title="smoothing"></div><div id="legend' + visualize.chartid +'"></div></div>');        var valseries = [];       var valseries2 = [];       var valseries3 = [];       var valmap = {};       var = 0;        object.keys(data).foreach(function(propertyname) {         var value = data[propertyname];         var val2 = (math.random() * (102 - 87) + 86) / 100;         var val3 = (math.random() * (95 - 70) + 69) / 100;         valseries.push({x: i, y: data[propertyname].amount});         valseries2.push({x: i, y: data[propertyname].amount * val2});         valseries3.push({x: i, y: data[propertyname].amount * val3});         valmap[i] = data[propertyname].name;         i++;       });        var graph = new rickshaw.graph({         element: document.queryselector('#chart' + visualize.chartid),          width: width,          height: 150,         renderer: visualize.chart,         stroke: true,         series: [           {             data: valseries3,             color: '#f0ad4e',             name: 'three years ago',           },           {             data: valseries2,             color: '#5bc0de',             name: 'two years ago',           },           {             data: valseries,             color: '#5cb85c',             name: 'past year'           }         ]       });        var format = function(n) {         var map = valmap;         return map[n];       }        var x_ticks = new rickshaw.graph.axis.x({         graph: graph,         width: width,         orientation: 'bottom',         element: document.getelementbyid('x_axis' + visualize.chartid),         pixelspertick: width/numticks,         tickformat: format       });        var y_axis = new rickshaw.graph.axis.y({         graph: graph,         orientation: 'left',         tickformat: rickshaw.fixtures.number.formatkmbt,         element: document.getelementbyid('y_axis' + visualize.chartid),       });        graph.render();        var hoverdetail = new rickshaw.graph.hoverdetail({         graph: graph,         formatter: function(series, x, y) {           var content = app.lib[visualize.dataformat](parseint(y)) + "<br>";           return content;         }       });        var legend = new rickshaw.graph.legend( {         graph: graph,         element: document.getelementbyid('legend' + visualize.chartid)        } );        var shelving = new rickshaw.graph.behavior.series.toggle( {         graph: graph,         legend: legend       } );      }   }; }); 

edit:
fixed removing chart method altogether , replacing ng-init attributes. this:

<chart data-attrone="somedata" data-attrtwo="some other data" /> 

then attrs available in directive attrs.attrone, etc.

attribute names must lower-case.

hope helps in future.

i fixed removing chart method altogether , replacing ng-init attributes. this:

<chart data-attrone="somedata" data-attrtwo="some other data" /> 

then attrs available in directive attrs.attrone, etc.

attribute names must lower-case.

hope helps in future.