fix(sticky): compile cloned element in the same scope

[devversion]

Currently never apply a scope to the cloned element, which will cause problems with directives, which have bindings in their template.

Also added the documentation for a common use-case

Closes #4979

[EladBezalel]

Code LGTM

@devversion closing #4979?

[devversion]

@EladBezalel Yep, just referenced now :)

[SriramaDanturthi]

this is missing

MdSticky.$inject = ["$document", "$mdConstant", "$$rAF", "$mdUtil", "$compile"];

[devversion]

@Sriram143 No need, this will be automatically added through the build process, using ngAnnotate.

[SriramaDanturthi]

@devversion Thanks for the update.

[david-meza]

Thanks for the contribution. I am running into this issue at the moment, so the PR is appreciated. One question I have is will this still work with more complex templates that use transclusion and/or inner components which have to compile (say, md-icon)? Thank you.

[devversion]

@david-meza The new changes won't change anything huge in the service. As mentioned in the documentation, we will compile the cloned directive by default into the provided scope. At this point there can be problems with already-compiled elements which change their structure during compilation.

So for example if I use a directive template like:

<my-directive>
  Hello
</my-directive>

and the actual directive will modify the element tree, to look like this:

<my-directive>
  <div class="wrap-container">
    Hello
  </div>
</my-directive>

then we'll have a problem with compiling that back into the element tree. The compilation of the cloned element is required, to reapply the specified scope to the cloned element.

If this is your case, that the directive can't detect the actual content anymore - then you have to use the plain template as shown in the example.

So finally I can say, this is a good question and isn't easy to solve, because we have no way to detect the initial DOM structure or copying all the needed controllers / directives back to the cloned element.