AngularJS ng-include: onload calling a function defined in included controller

angularjs, angularjs-ng-include

Solution

Leave the parent container the way you defined it:

<div ng-include="'/path/template.html'" onload="childOnLoad()"></div>

In the parent controller define:

$scope.childOnLoad() {
  $scope.$broadcast("childOnLoad", data);
}

and in the child controller:

$scope.$on("childOnLoad", function (event, data) {
  alert("Loaded!");
});

Problem

Using AngularJS, is it possible to use the "onload" argument to trigger a function defined inside a "child" controller (a controller called by the included template)? Example: ``` <!-- parent container --> <div ng-include="'/path/template.html'" onload="childOnLoad()"></div> <!-- template.html --> <div ng-controller="childController"> <p ng-bind="txt"></p> </div> <!-- childController.js --> app.controller('childController', function($scope) { $scope.txt = "Test text"; $scope.childOnLoad = function() { alert("Loaded!"); }; }); ``` Does it make sense? Or should I simply call the function inside the childController, as in the following? ``` <!-- childController.js --> app.controller('childController', function($scope) { $scope.txt = "Test text"; $scope.childOnLoad = function() { alert("Loaded!"); }; $scope.childOnLoad(); }); ```

Original source

Related problems