Currently, I have been working on an AngularJS Directive that is designed to function as a stand-alone widget with the ability to be customized by setting attributes in the form of Objects. My main goals for this project include:
- To carry out processing within the directive based on the Object passed through attributes. This processing includes retrieving REST API responses, which is why I am utilizing controllers to accomplish this task.
- Once the directive performs its designated processing, it may alter the Object, allowing my Parent Controller to make changes accordingly.
Below is an example code snippet that demonstrates how my objectives are met:
Directive Usage:
<post-listing page-id="currentPage.id" config="postConfig" posts="posts" />
Directive Code
'use strict';
angular.module('myApp')
.directive('postListing', function () {
return {
templateUrl: '/views/directive.post-listing.html',
restrict: 'EA',
scope: {
page_id:"=",
config:"=",
posts:"=",
},
controller: "DirectivePostListingCtrl"
};
});
Controller Code for Directive:
'use strict';
angular.module('myApp')
.controller('DirectivePostListingCtrl', function ($scope, $rootScope, $routeParams)
{
// Accessing page_id and config as actual values here
// Updating the posts array exposed outside of the directive
});
Template Code:
<h4>Displaying Posts for {{page.title}}</h4>
<ul>
<li ng-repeat="p in posts" >{{p.title}}</li>
</ul>
When executing this code, I encounter issues where $scope.page_id is either displaying as "undefined" or "currentPage.id" (depending on the operator used = or @) rather than showing the expected value of currentPage.id.
Any suggestions would be greatly appreciated.
Thank you in advance.