AngualrJs Dump Filter for View

Question

Who could share filter solution (probably there is native solution for it) that could dump data in AngularJs view templates(for debugging purposes)?

I'm looking something like:

<div>
{{somedata|dump}}
</div>

It could be not filter. The idea is to debug data that is coming to the view.

Thank you.

Answer 1

Found good one

app.directive("debug", function ($compile) {
    return {
        terminal: true,
        priority: 1000000,
        link: function (scope, element) {
            var clone = element.clone();
            element.attr("style", "color:red");
            clone.removeAttr("debug");
            var clonedElement = $compile(clone)(scope);
            element.after(clonedElement);
        }
    }
})

https://egghead.io/lessons/angularjs-build-a-debug-directive

Answer 2

I tried looking at some built-in solutions but I could not find anything at all.

I guess nobody would find such a thing really usefull since you have 2 decent solutions:

1. Outputing the data with {{somedata}}
2. Using Batarang. In case you are unfamiliar with Batarang please see the github page or a short introduction video

I find investigating the scope data with Batarang is very efficient.

If you really think you could use the filter i guess you can code it yourself. All you need to find is a treview control that displays json data and wrap that in an angular filter.

Regards