Managing a controller responsible for fetching event JSON data, updating the DOM with data if available, and displaying an error message if no data is found:
//Controller.js
myApp.controller('EventsCtrl', ['$scope','API', function ($scope, api) {
var events = api.getEvents(); //events: {data: [], error: {message: 'Some message'}}
}]);
//Directives.js
myApp.directive('notification', function () {
return {
restrict: 'A',
link: notificationLink
};
});
/**
* Displaying notification messages
*/
var notificationLink = function($scope, element, attrs) {
$scope.$watch('notification', function(message) {
element.children('#message').text(message);
element.slideDown('slow');
element.children('.close').bind('click', function(e) {
e.preventDefault();
element.slideUp('slow', function () {
element.children('#message').empty();
});
});
});
};
//Services.js
...
$http.get(rest.getEventsUrl()).success(function (data) {
// Do something with data
}).error(function (data) {
$window.notification = data;
});
Encountering issues where the element changes are triggered but $window.notification remains empty.
Edit: Attempted to address this using $watch functionality.
Edit: Combining both sets of html into one controller resolved the DOM manipulation issue with the help of $watch(). Grateful for the assistance provided!