Beginner to Angular, I may be phrasing this incorrectly but I don't know how else to describe it.
When a route change occurs like this
.when('/manage/users', {
templateUrl: 'Angular/manage/users/overview.html',
controller: 'usersCtrl'
}
})
Is there anyway to access compile
or link
functions for the loading template as if it was a directive?
I'd like to include a loading animation on the route to be loaded INSIDE the template but I don't see a way to access the template as if it was a directive(where i would usually use link
)
EDIT: Example of what I'm trying to do
When the above route is invoked
overview.html
<div ng-controller="usersCtrl" class="listPane">
<div class="loader">Loading...</div> <!--Relevant Div I want to control-->
<div ng-repeat="group in listGroups">
<div class="tile-group max">
<div class="tile-group-title"><a>{{group.title}}</a></div>
<div listview items="group.items"></div>
</div>
</div>
</div>
my controller does an async GET to get a list of users
app.controller('usersCtrl', ['$scope','companyService', function($scope, companyService){
$scope.listGroups = {title:'All Users',
items:[]};
$scope.listAsyncAnimate = true; //variable I would like to use to control showing or hiding loading div
$scope.$watch('listGroups', function(newVal, oldVal) {
$scope.listGroups = newVal;
});
companyService.getUsers(1).then(function(data)
{
$scope.listAsyncAnimate = false; //turn off loading div after list has been returned
$scope.listGroups = [{
title: 'All Users',
items: Utility.userlistToMetroList(data)
}];
});
}]);
In other directives I use the above controllre functionality ALONG WITH watching the variable to control visibility from link
, which I don't have access to when I'm doing a route change to a template(overview.html
):
link: function (scope, element, attr) {
var loader = $(element).find('.loader');
scope.$watch('listAsyncAnimate', function(newVal, oldVal){
if(newVal)
{
loader.spin('small');
loader.removeClass('ng-hide');
}
else
{
loader.addClass('ng-hide');
}
});
}