等待加载angularjs指令模板

Question

我想要做的是推迟加载指令的角度js模板,直到我真的需要它.我可能根本不需要它.有没有办法,如果需要,我可能只加载指令的模板.服务是否可以做到这一点？我的应用程序已经加载了很多指令模板,我想避免加载太多的东西,除非我需要它.手头的确切问题是加载登录表单的模板.如果用户点击一个按钮并且他/她没有登录,我想使用一个登录表单slideOpen(使用jQuery).

Answer 1

在绝大多数情况下,动态加载静态指令模板没有任何价值.它们非常小,只是做起来没有意义.但是,这是可能的.但是,大多数情况下,此策略用于动态模板.

它需要$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,证明它有效.