I am a novice in the world of AngularJS and I have set out to create a custom directive that will display specific items from an ng-repeat loop. Here is my current custom directive:
(function(module) {
module.directive('portfolioList', function () {
return {
restrict: 'A',
templateUrl: 'util/portfolio-list.tpl.html',
controller: function($scope){
var items = [
{
name: 'SomeName',
imgLink: 'imgLink',
urlLink: 'urlLink'
}
];
$scope.portfolioItems = items;
}
};
});
}(angular.module("ab4.site.util")));
Here is the corresponding HTML code:
<li class="col-md-4 mix" ng-repeat="item in portfolioItems">
<a href="{{item.urlLink}}" >
<!-- Portfolio image -->
<img src="{{item.imgLink}}" >
<!-- Portfolio name, activated on hover -->
<div>
<h4>{{item.name}}</h4>
</div>
</a>
</li>
Now, I am aiming to create a new custom directive that will replace this part of the HTML code:
<a href="{{item.urlLink}}" >
<!-- Portfolio image -->
<img src="{{item.imgLink}}" >
<!-- Portfolio name, activated on hover -->
<div>
<h4>{{item.name}}</h4>
</div>
</a>
However, I am facing difficulties in establishing a connection between the item in the ng-repeat loop and the new custom directive.