My goal is to create a directive that accepts an array or object as an attribute, allowing the user to customize the data formatting and styling. Although the directive is more complex than described here, it enables further data manipulation.
An example of what I'm trying to achieve:
The Custom Directive
angular.module('app').directive('myDirective', () => {
return {
template: '<h2>Your data:</h2><div><ng-transclude></ng-transclude></div>',
restrict: 'E',
transclude: true,
scope: false,
link: ($scope, $element, $attrs) => {
$scope.people = $attrs.data;
// Additional data processing can be done here
},
controller: ($scope, $element, $attrs) => {
$scope.people = $attrs.data;
// More processing can be done here as well
}
};
});
The Usage in View
<my-directive data="[{name: 'Tyler'}, {name: 'Mike'}, {name: 'John'}]">
<ul>
<li ng-repeat="person in people">{{person.name}}</li>
</ul>
</my-directive>
I attempted to implement this but encountered issues with functionality. If anyone has suggestions on why this seemingly simple implementation isn't working, I would appreciate the guidance.