angularjs - Unable to call Angular directive method -

angularjs - Unable to call Angular directive method -

i've got angular view thusly:

<div ng-include="'components/navbar/navbar.html'" class="ui centered grid" id="navbar" onload="setdropdown()"></div> <div class="sixteen wide centered column full-height ui grid" style="margin-top:160px"> <!-- other stuff --> <import-elements></import-elements> </div>

this controlled ui-router, assigning controller, fyi.

the controller view looks this:

angular.module('pcfapp') .controller('importelementsctrl', function($scope, $http, $location, $stateparams, $timeout, framework, officialframework) { $scope.loadofficialframeworks(); // other stuff here });

the <import-elements> directive, looks this:

angular.module('pcfapp').directive('importelements', function($state, $stateparams, $timeout, $window, framework, officialframework) { var link = function(scope, el, attrs) { scope.loadofficialframeworks = function() { officialframework.query(function(data) { scope.officialframeworks = data; $(".ui.dropdown").dropdown({ onchange: function(value, text, $item) { loadsections($item.attr("data-id")); } }); window.settimeout(function() { $(".ui.dropdown").dropdown('set selected', data[0]._id); }, 0); }); } homecoming { link: link, replace: true, templateurl: "app/importelements/components/import_elements_component.html" } });

i under impression i'd able phone call directive's loadofficialframeworks() method controller in way (since i'm not specifying isolate scope), i'm getting method undefined error on controller. missing here?

the problem controller function runs before link function runs, loadofficialframeworks not available yet when seek phone call it.

try this:

angular.module('pcfapp') .controller('importelementsctrl', function($scope, $http, $location, $stateparams, $timeout, framework, officialframework) { //this fail because loadofficialframeworks doesn't exist yet. //$scope.loadofficialframeworks(); //wait until directive's link function adds loadofficialframeworks $scope var disconnectwatch = $scope.$watch('loadofficialframeworks', function (loadofficialframeworks) { if (loadofficialframeworks !== undefined) { disconnectwatch(); //execute function know has been added scope $scope.loadofficialframeworks(); } }); });

here's fiddle illustration in action: http://jsfiddle.net/81bcofgy/

angularjs angularjs-directive