javascript - AngularJS - Getting data inserted in dom

Question

I'm looking for a way to get initial data from a DOM after the application is loaded. Data has been inserted in a view by a server. Is Module's value method is a good way?

As well i want to know how to get data from a views when i'm working with routes , can i use script tags for injecting a data in specific scopes?

I saw this and this questions but it didn't help a lot.

Answer 1

1) First solution inspired by this question and it is Module's value method:

<script>
   var users_json = '[{"name":"Piotr"},{"name":"Natasha"}]'; // created by xsl
   myApp.value("PrimaryData" , users_json );
</script>
<ul>
   <li ng-repeat="user in users">{{user.name}}</li>
</ul>

Then we can use this PrimaryData when and where we wish , like this:

myApp.controller('MainCtrl', function($scope, PrimaryData) {
    $scope.data = angular.copy(PrimaryData); 
    console.log( $scope.data[0].name === "John" );
});

But this way somehow not worked for me when i started to use routes , may be because the value only runs while application initialization.

2) So here comes the second solution: directives. Now when server sends a route's template , it puts inside some script tag with a "text/template" type and special directive name property and a json data in that tag, like this:

<script  type = "text/template" rawdata >     <!-- "rawdata" is our directive
   '[{"name":"Nelson"},{"name":"Luis"}]'      // created by xsl
</script>
<ul>
   <li ng-repeat="user in users">{{user.name}}</li>    // view is beside
</ul>

And this directive catching it and passes the data to the current route' scope:

studio.directive('rawdata', function() {
  return {
    link: function(scope, element, attr, ctrl) { 
        if(scope.passRawData){
            var data = (element[0].innerHTML);
            scope.passRawData(data); // Or simply scope.users = JSON.parse(data)
        } else {
            console.log( "Scope has no passRawData method" );
        }
    }
  }
});

Awesome! :)