AngularJS 中延迟加载数据的指令

Question

我目前正在学习 Angular，并试图找出一种用于延迟加载数据和结构化代码的良好模式。

我正在制作一个响应式 Web 应用程序，我希望能够定义网页的某些部分从视图中隐藏（最好使用媒体查询）。

为隐藏指令或视图获取的数据是多余的。

从桌面视图到移动视图的差异可能很大，我希望应用程序在移动性能方面和网络使用方面尽可能轻。

有什么好的方法可以制作一个可以解决这个问题的好架构？

如果指令可以检查它当前是否可见（在当前视口内，例如不在隐藏的父级内或display: none 内）。

我已经提供了这样一个指令的示例用法，但我想要一些关于如何实现它的指针。

该指令可以采用一个指向回调函数的表达式，当组件可见并且在视口的 200 像素内时应该触发该回调函数。

注意：以下是虚构示例，没有好的用例。

<!-- Check if the device has some feature, for example touch, and hide content based on results -->
<div ng-show="current.device.touch">
    <users lazyload="{userList: dataservice.getUsers | filter:search}" treshold="200px" placeholder="emptyUserlist">
    </users>
</div>

这是个好主意/坏主意？

dataservice 是一个更抽象的服务，它从 $resource 和缓存容器中获取数据。

Answer 1

Angular 不支持延迟加载作为一项功能，但仍然可以延迟加载任何内容！

关键在config函数中：

var providers = {};

var app = angular.module('myApp', []);
app.config(function(
  $controllerProvider,
  $compileProvider,
  $routeProvider,
  $filterProvider,
  $provide
) {
  providers.controllerProvider = $controllerProvider;
  providers.compileProvider    = $compileProvider;
  providers.routeProvider      = $routeProvider;
  providers.filterProvider     = $filterProvider;
  providers.provide            = $provide;
});

现在您可以使用缓存的提供程序来延迟加载（注册）Angular 功能。

延迟加载控制器：

function myCtrl($scope) {
 //etc
}
providers.controllerProvider.register('myCtrl', myCtrl);

延迟加载指令：

function myDirectiveName() {
  //etc
}
providers.compileProvider.directive('myDirectiveName', myDirectiveName);

举个实用且更高级的例子，See my answer on this post (click).，我在向下滚动页面时从外部文件延迟加载视图及其控制器。

简单演示：

Live demo here (click)

<div lazy></div>

角度逻辑：

var providers = {};

var app = angular.module('myApp', []);
app.config(function(
  $controllerProvider,
  $compileProvider,
  $routeProvider,
  $filterProvider,
  $provide
) {
  providers.controllerProvider = $controllerProvider;
  providers.compileProvider    = $compileProvider;
  providers.routeProvider      = $routeProvider;
  providers.filterProvider     = $filterProvider;
  providers.provide            = $provide;
});

app.directive('lazy', function() {
  return {
    restrict: 'A',
    compile: function(element, attrs) {
      providers.controllerProvider.register('myCtrl', myCtrl);
      providers.compileProvider.directive('myDirectiveName', myDirectiveName);
      var span = angular.element('<span></span>')
        .attr('my-directive-name', '')
        .attr('ng-controller', 'myCtrl');
      element.append(span);
    }
  };
});

function myDirectiveName() {
  return {
    restrict: 'A',
    compile: function(element, attrs) {
      var str = 'This text came from a lazy-loaded directive {{anotherString}}';
      element.text(str);

    }
  };
}
function myCtrl($scope) {
  $scope.anotherString = 'and this text came from a lazy-loaded controller!';
}

Answer 2

Angular 目前不具备延迟加载的能力。然而，Misko（Angular 的创造者）在最近的一次聚会中提到延迟加载在不久的将来的产品路线图上：

http://www.youtube.com/watch?v=Dro-hLSQhoc