Angular : check in controller if directives link function is called

Question

So, we have a directive grid, which exposes directive controller to the angular controller, so that controller can call functions on directive (just like a form controller).

Now, in my angular controller every thing works as long as I access the directive controller from a callback action eg. some $scope.xx which are called on some event like click or any thing.

But when i try to access the directive controller at controller initialization time, the directive controller is undefined, that means, directives link function is not called yet.

Here's some code

function controller() {
  $scope.init = function() {
    $scope.grid.search(xx)
  }

$scope.init() // this will fail, because $scope.grid is undefined.

$scope.onClick = function() {
  $scope.grid.search(xx) // this will work
 }
}

is there any other way, other then watching the $scope.grid, to have the $scope.grid.search called on controller initialization

angular cycle, it will first execute your controller then your generate html as per your controller scope. So in you case you will not have grid object in your controller scope. You should let angular execute one digest cycle before calling $scope.grid.search() . You can use $timeout for that. — dhavalcengg
– dhavalcengg, Commented Jan 27, 2015 at 15:26
This breaks separation of concerns, in my opinion, when you make assumptions in your controller about an existence of a directive. Granted, tt's indirect here via scope, but it still feels wrong. $modal solved that with the use of a service to call functions on the $modal — New Dev
– New Dev, Commented Jan 27, 2015 at 15:33
why can't you pass a config object to the directive for initialization purposes? — charlietfl
– charlietfl, Commented Jan 27, 2015 at 15:43
I honestly don't think this is the way to achieve anything. I don't remember I see anyone use this way, calling function in the directive. It just feels wrong to me. Maybe you should talk more about why do you want to do it ? — maxisam
– maxisam, Commented Jan 27, 2015 at 15:49

Artyom Pranovich · Accepted Answer · 2015-01-27 15:31:07Z

2

You can just broadcast event from link function in your directive.

<div ng-controller="MyCtrl">
    <div abc></div>
</div>

myApp.directive('abc', function($rootScope) {
    return {
        restrict: "EA",
        link: function(scope, element, attrs){
            $rootScope.$broadcast("initialize");
        }
    }
});

function MyCtrl($scope) {
    $scope.$on("initialize", function(){
        alert("Link function has been initialized!");
    });
}

I've created JSFiddle for you.

answered Jan 27, 2015 at 15:31

Artyom Pranovich

6,9728 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dhavalcengg Over a year ago

This could be a possible solution.

Sudhir N Over a year ago

This will absolutely work, but doesnt look clean to me, i can change this directive as i have access to it, but if it was a third party directive, this wouldnt be a solution. Looks like i will go with $watch, doesnt look like there's any better solution at this time.

Michael Kang · Accepted Answer · 2015-01-27 15:45:13Z

0

The problem is that parent controllers are always called before child controllers.

If you want to run code after your child directive is initialized, you can create a directive and put the initialization code inside of its link function.

This works because parent link functions are always called after child link (and controller) functions.

answered Jan 27, 2015 at 15:45

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Collectives™ on Stack Overflow

Angular : check in controller if directives link function is called

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related