include: onload calling a function defined in included controller
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();
});
In your second attempt you did right: you are creating some functions, the scope of that controller is taking those functions as properties, then $scope.childOnLoad(); will call the function you created.
In fact you can define so many functions but they are not called while loading or when loads complete.
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!");
});