title: Angular: linking lazy loaded directive with DOM element
body: <p>Been reading couple blog posts about the lazy-loading in Angular:</p>
  
  <ul>
  <li><a href="http://alexfeinberg.wordpress.com/2014/04/26/delay-load-anything-angular/" rel="nofollow">http://alexfeinberg.wordpress.com/2014/04/26/delay-load-anything-angular/</a></li>
  <li><a href="http://ify.io/lazy-loading-in-angularjs/" rel="nofollow">http://ify.io/lazy-loading-in-angularjs/</a></li>
  <li><a href="http://www.bennadel.com/blog/2554-loading-angularjs-components-with-requirejs-after-application-bootstrap.htm" rel="nofollow">http://www.bennadel.com/blog/2554-loading-angularjs-components-with-requirejs-after-application-bootstrap.htm</a></li>
  <li><a href="http://blog.getelementsbyidea.com/load-a-module-on-demand-with-angularjs/" rel="nofollow">http://blog.getelementsbyidea.com/load-a-module-on-demand-with-angularjs/</a></li>
  </ul>
  
  <p>I was able to successfully implement some of those techniques to fit my needs (AngularJS + RequireJS) for lazy-loading the controllers. However, I could not find a way to be able to truly load the directives on demand. Directives are 99.99% of times used right out of the views, so that demand has to be declared somewhere in the view. I feel that manually specifying whole list of all kinds of dependencies that each state/route depends on at the router level is quite an overkill. I might be wrong though. Expecting some arguments here.</p>
  
  <p>Now, despite the uncertainty, I was thinking of having a comment directive like:</p>
  
  <pre><code>&lt;!-- directive: require-directive 'translate' --&gt;
  </code></pre>
  
  <p>Or possibly:</p>
  
  <pre><code>&lt;!-- directive: require ['directive/translate', 'filter/human-readable'] -&gt;
  </code></pre>
  
  <p>And then later in the view use it like:</p>
  
  <pre><code>&lt;div translate&gt;message.welcome&lt;div&gt;
  </code></pre>
  
  <p>However, this brings couple of problems:</p>
  
  <ol>
  <li>Loading of directives is async and non-blocking, meaning we'll see aka-FOUT effect within the views.</li>
  <li>Whole view has to be recompiled, after directive dependencies have been resolved.</li>
  </ol>
  
  <p>So far I don't use the comment directive, and instead I have this:</p>
  
  <pre><code>&lt;title require="directives/translate" translate&gt;message.welcome&lt;/title&gt;
  </code></pre>
  
  <p>But with this approach, you can't really benefit from the <code>$scope.$apply()</code>, I have no idea why. So instead I am forced to recompile the instance element manually with priority (to avoid the infinite loop, since otherwise <code>require</code> directive will recompile itself):</p>
  
  <pre><code>// note last argument 10000 — this is the priority
  // @see https://code.angularjs.org/1.2.20/docs/api/ng/service/$compile#usage
  $compile($element, angular.noop, 10000)($scope);priority
  </code></pre>
  
  <p>Then it works. And doesn't recompile the whole view, just the element where the <code>require</code> directive is present. Perhaps I could remove the <code>require</code> directive, right before the recompilation. Just got struck with this idea while typing the SO question. Have to give it a go.</p>
  
  <p>But anyway, since we're quite deep with angular already, I'm kind of afraid to implement this code to production, because I have no real experience with priority.</p>
  
  <p>So my questions:</p>
  
  <ol>
  <li>Am I doing something terribly wrong? (why?)</li>
  <li>Do you agree that manually writing full list of dependencies for each state/route is something unintuitive and/or redundant? (if no, why?)</li>
  <li>Is there a better way of doing it?</li>
  </ol>
  
  <p>Thanks.</p>
  
  <hr>
  
  <h2>EDIT # 1</h2>
  
  <p>Here's the <strong><a href="http://plnkr.co/edit/czCXMq?p=preview" rel="nofollow">working prototype</a></strong> of the comment-based require directive:</p>
  
  <pre><code>&lt;!-- directive: require ['directive/translate', 'filter/human-readable'] -&gt;
  </code></pre>
  
  <p>However I think this method has a big flaw: we have to compile (render) whole view after dependencies resolution. One the other hand, if we sacrifice the natural directive registration:</p>
  
  <pre class="lang-js prettyprint-override"><code>define(['app'], function() {
      app.directive('title', ['$rootScope', function ($rootScope) {
          ....
      }]);
  })
  </code></pre>
  
  <p>for something like:</p>
  
  <pre class="lang-js prettyprint-override"><code>define([], function() {
      return {
          'directive': ['title', ['$rootScope', function ($rootScope) { ... }]]
      }
  });
  </code></pre>
  
  <p>This becomes not so "native", but gives us performance boost possibilities by querying and compiling only specific DOM nodes, instead whole view. Gotta give it a go.</p>
  
  <hr>
  
  <h2>EDIT # 2</h2>
  
  <p>So, inspired by idea to query elements for rendering — I gave it a go. And it works well: <a href="http://plnkr.co/edit/cClpSd?p=preview" rel="nofollow">http://plnkr.co/edit/cClpSd?p=preview</a></p>
  
  <p>This is still alpha and doesn't handle the filters, but it's getting close to somewhat usable look.</p>