Update to 1.0.0 breaks inline directive

[websirnik]

I've updated from 1.0.0-beta-2 to 1.0.0, the following declaration has stopped working for me:

    <div ng-switch-when="some-clause" >
        <div oc-lazy-load="['/vendors/file1.js', '/vendors/file2.js' ]">
            <my-directive url="{[ vm.url ]}"></my-directive>
        </div>
    </div>

I can see that /vendors/file1.js& /vendors/file2.js were loaded, but my-directive never got compiled. fyi my-directive is not inside those files, it was loaded before.

In the docs you mention different syntax, but it produces an error:

<div oc-lazy-load="{['js/testModule.js', 'partials/lazyLoadTemplate.html']}">
  <!-- Use a directive from TestModule -->
  <test-directive></test-directive>
</div>

[ocombe]

I changed some things to the way directives are handled (to fix another bug).
Thanks for reporting this, I'll try to find a way to fix this one without breaking the other one :D

[o-3]

For me, 532c7fe fixed the directive compiling issue. Thanks for the great tool:)

[joaovieira]

@snkhrn commit on top of v1.0.5 did not work for me.

Don't know why the $compile step in the directive has changed from the simplified old version:

$ocLazyLoad.load(moduleName).then(function success(moduleConfig) {
  $animate.enter($compile(content)($scope), null, $element);
});

Into:

$ocLazyLoad.load(moduleName).then(function () {
  $animate.enter(content, $element);
  var contents = element.contents();
  angular.forEach(contents, function (content) {
    if (content.nodeType !== 3) {
      // 3 is a text node
      $compile(content)($scope);
    }
  });
});

In this last version, element.contents() will always be empty as you empty it in element.html(''); above. Therefore, the $compile step never happens.

Solution (is there really a need to skip text nodes?):

1. Compile the entire original content, nicely as it was before:

$animate.enter($compile(content)($scope), $element);

2. Or use $element instead of element, since the $animate.enter appends the content into $element:

var contents = $element.contents();

I would do a PR with solution 1, but maybe there's a reason for not compiling the content altogether?

For the record, this is my simplified view code:

<div ng-if="flag">
  <div oc-lazy-load="'asyncModule'">
    <ng-include src="'templateSrc'"></ng-include>
  </div>
</div>

Using angular 1.4.6. For some other reason that I didn't want to investigate it works fine without the ng-if.

[ocombe]

This directive proves to be harder to support all the cases than expected :)
Any help would be appreciated on this, but I'd like to keep the compatibility with text nodes

[joaovieira]

Alright, I went back to #168, to find the source for this. Run some quick tests - true that angular doesn't like angular.element('bla bla <div></div>') or $compile('bla bla <div></div>')($scope)...

So the trick is not to store the HTML string as the original content, but the contents element itself. I've created a PR with this. #240

[mstone6769]

I found some issues using the directive and having ngAnimate turned on in an Angular 1.2.13 app. I believe this is related to the issue above.

http://codepen.io/mstone6769/pen/bBWyGj?editors=1010