Is there a way to get a scope of a DOM element when debug info is disabled?

All we need is an easy explanation of the problem, so here it is.

I’m writing an directive which need to retrieve a scope of current DOM element. using the non public api angular.element().scope();

It works well until angular 1.3 introduces a new feature $compileProvider.debugInfoEnabled(false); which mainly aims to improve performance to avoid bind data in DOM element. But when debugInfoEnabled() is set to false, angular.element().scope() will return undefined. So I must find another way to get the scope of an DOM element or I have to redesign my code logic.

Is there a way to make this possible?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I just faced a similar problem in our application after compiling our app with $compileProvider.debugInfoEnabled(false);. I needed to later access some of our directive’s isolate scope but couldn’t use the isolateScope() method. To get around the problem, I created a helper function in a Utils service that looks like this:

this.setElementIsolateScope = function(element, scope) {
    element[0].isolateScope = function() {
        return scope;
    };
};

Then inside any directive where I needed to be able to later access the isolate scope I called this function inside the link() function: Since element is a jqLite object, you need to set the isolateScope() function on element[0]. You should already have the jqLite wrapped element and scope already passed into your link function, which you then just pass to your service method.

Utils.setElementIsolateScope(element, scope);

To then access the isolate scope later, you would get a reference to your element and then do this (assuming child_element is the reference to your element/directive):

var child_iso_scope = _.isFunction(child_element.isolateScope) && child_element.isolateScope();

Depending on how you are getting the reference to your element, you may need to wrap it a jqLite wrapper like this:

child_element = angular.element(child_element);

And then just use the same way as above to get the isolate scope. Hope this helps!

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply