Question

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');
           }
        });
 }
Was it helpful?

Solution

Here is a plunker:

Just create a directive:

app.directive('myDirective', function($route){
  return {  
    link: function(){
      var link = $route.current.link || angular.noop;
      link.apply(null,arguments);
    }
  }
})

And add it to ngView

<div ng-view my-directive></div>

now in your route defintion you have a link function:

.when('/manage/users', {
    templateUrl: 'Angular/manage/users/overview.html',
    controller: 'usersCtrl',
    link: function(scope,elm,attrs){
       // do your magic
    }
  }
})
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top