<!DOCTYPE html>
<html>
<head>
<script data-require="firebug-lite@1.4.0" data-semver="1.4.0" src="//cdnjs.cloudflare.com/ajax/libs/firebug-lite/1.4.0/firebug-lite.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-resource.js"></script>
<script src="script.js"></script>
<script src="controller.js"></script>
<script src="service.js"></script>
</head>
<body>
<div ng-controller="SlugCtrl">
<div data-maincontent="maincontent" id="main-content">expecting remote data with injected directive</div>
</div>
</body>
</html>
'use strict';
/**
*
* Main module of the application.
*/
var blancAppApp = angular
.module('blancAppApp', [
'ngResource',
//'wu.masonry'
]);
'use strict';
/**
* @ngdoc function
* # SlugCtrl
* Controller of the blancAppApp
*/
angular.module('blancAppApp')
.controller('SlugCtrl', function ($scope, WpApi, $compile, $filter) {
// the Content to be rendered.
$scope.post = [];
loadRemoteData();
// load remote data from the server.
function loadRemoteData() {
// The WpApiService returns a promise.
WpApi.getContents()
.then(
function( post ) {
applyRemoteData( post );
});
}
// apply the remote data to the local scope.
function applyRemoteData( newContents ) {
$scope.maincontent = $compile( newContents[0].content )($scope);
alert();
console.log($scope.maincontent);
}
}).directive('maincontent', function() {
return {
restrict: 'A',
scope: {
maincontent: '=maincontent'
},
link: function (scope, element, attrs) {
element.append( scope.maincontent );
}
};
});
'use strict';
/**
* @ngdoc service
* # WpApi
* Service in the blancAppApp.
*/
angular.module('blancAppApp')
.service('WpApi', function( $http, $q, $routeParams, $compile, $rootScope) {
// Return public API.
return({
//TODO addContent: addContent,
getContents: getContents,
//TODO removeContent: removeContent
});
// I get all of the friends in the remote collection.
function getContents()
{
var request = $http({
method: "get",
url: "http://blanc-encens.kakuki.de/wp-json/posts/?type[]=post&type[]=page&filter[name]=blancencens-profile",
params: {
action: "get"
}
});
return( request.then( handleSuccess, handleError ) );
}
// the API response payload.
function handleError( response ) {
if (
! angular.isObject( response.data ) ||
! response.data.message
) {
return( $q.reject( "An unknown error occurred." ) );
}
// Otherwise, use expected error message.
return( $q.reject( response.data.message ) );
}
// I transform the successful response, unwrapping the application data
// from the API response payload.
function handleSuccess( response ) {
return( response.data );
}
});