angularjs - 等待加载 angularjs 指令模板

Question

我想做的是推迟加载指令的 Angular js 模板，直到我真正需要它为止。我什至可能根本不需要它。有没有一种方法可以让我只在需要时加载指令的模板。服务会是这样做的方式吗？我的应用程序已经加载了很多指令模板，除非我需要，否则我想避免加载太多东西。手头的确切问题是加载登录表单的模板。如果用户单击按钮但他/她未登录，我想 slideOpen(使用 jQuery)登录表单。

Answer 1

在绝大多数情况下，动态加载静态指令模板没有任何值(value)。它们是如此之小，以至于这样做是没有意义的。但是，这是可能的。然而，大多数时候，这种策略用于动态模板。

它需要 $http 来获取模板和 $compile 来将它连接到 AngularJS。

app.directive('testDirective', function($http,$compile) {
  return {
    scope: { show: '&' },
    link: function( scope, element, attrs ) {
      var tpl,
          url = 'testDirective.tpl.html';

      scope.$watch( 'show()', function (show) {
        if ( show ) {
          showTheDirective();
        }
      });

      function showTheDirective () {
        if ( !tpl ) {
          $http.get( url ).then( function ( response ) {
            tpl = $compile( response.data )( scope );
            element.append(tpl);
          });
        }
      }
    }
  };
});

这是一个 Plunker证明它有效。