I am currently working on an open-source application that utilizes AngularJS for the frontend. The app has a unique structure where it manipulates the DOM by deleting and adding content for security reasons. However, I have encountered a challenge that I am struggling to resolve.
The core content of the website is loaded through a service that fetches data from a REST API and populates a directive. This directive then calls a template to render out the content.
The issue arises when new content is added successfully via a POST request from a controller in a different scope. I have attempted methods like $watch, $apply, $push, and even considered using $resource, but none seem to be the correct solution. Here is the snippet of the code:
Directive:
.directive("itemList", function ($timeout) {
return {
restrict: 'A',
template: "<ng-include src='getTemplateUrl()'/>",
...
Service:
.factory('sikreAPIservice', function ($http) {
//var mainAPIUrl = 'https://api.sikr.io/v1/';
...
Controller handling the POST request:
.controller('ItemsCtrl', function ($scope, $compile, sikreAPIservice) {
$scope.additem = function (item) {
...
You can access the functioning version at (please note that this is still in alpha stage, so avoid storing any sensitive information as the database will be reset).
The source code is available at https://github.com/clione/sikre-frontend/tree/master/assets/js
I understand that the overall layout of the app may not be optimal, so any guidance on improving it would be highly appreciated. If you have any suggestions on how to make the directive reload the content after a POST request, I would welcome your input.