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?
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! :)