1

Angular 的初学者,我的措辞可能不正确,但我不知道如何描述它。

当发生这样的路线变化时

.when('/manage/users', {
    templateUrl: 'Angular/manage/users/overview.html',
    controller: 'usersCtrl'
    }
})

无论如何访问compilelink加载模板的功能,就好像它是一个指令一样?

我想在要在模板内部加载的路线上包含一个加载动画,但我看不到一种访问模板的方法,就好像它是一个指令一样(我通常会在其中使用link

编辑:我正在尝试做的示例

调用上述路由时

概述.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>

我的控制器执行异步 GET 以获取用户列表

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)
        }];
    });
}]);

在其他指令中,我使用上述 controllre 功能以及观察变量以控制来自 的可见性link,当我对模板()进行路由更改时我无权访问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');
           }
        });
 }
4

1 回答 1

2

这是一个笨拙的人:

只需创建一个指令:

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

并将其添加到ngView

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

现在在您的路线定义中,您有一个链接功能:

.when('/manage/users', {
    templateUrl: 'Angular/manage/users/overview.html',
    controller: 'usersCtrl',
    link: function(scope,elm,attrs){
       // do your magic
    }
  }
})
于 2014-01-21T15:22:41.613 回答