As a newcomer to the world of Angular, I have embarked on my first complex directive project and find myself slightly perplexed. My goal is to construct a reusable list of items organized into separate tabs within my application. The list operates uniformly across tabs, albeit with varying item display methods handled by distinct partials. I am injecting attributes of diverse types into the scope and experimenting with different approaches gleaned from literature. Despite my efforts thus far, I remain plagued by issues pertaining to attribute binding.
Outlined below is my code accompanied by an attempt to elucidate the setup for a clearer understanding; hopefully someone can guide me towards rectifying any missteps. Primarily, only the string types seem to bind successfully whereas objects and functions appear to be elusive.
UPDATE: It transpires that linking $scope.currentPage to the directive's scope was necessary. Consequently, ng-repeat now executes as intended but additional portions of the page necessitating controller scope access fail to function. A revision has been made to the code provided below as I continue exploring strategies to grant template accessibility.
Directive
var app = angular.module('main');
app.directive('itemList', function(){
var linkFunction = function(scope, element, attributes){
scope.$watch("query.value", function(){
scope.filterFunction(); //I suspect this is never invoked during search
});
}
return {
restrict: 'E',
replace: 'true',
templateUrl: 'partials/directives/list-tab.html',
link: linkFunction,
scope: {
filterFunction: "&filterFunction",
searchPlaceholder: "@searchPlaceholder",
pagedItems: "=pagedItems",
clickFunction: "&clickFunction",
classString: "@classString",
infoTemplate: "@template",
currentPage: "=currentPage"
}
}
});
index.html
//pagedCars comprises an array of nested objects utilized by the template to present information
//filterCars denotes a function
//carSelected signifies a function
<div class="available-items">
<item-list filter-function="filterCars" search-placeholder="Search Cars" paged-items="pagedCars" current-page="currentPage" click-function="carSelected" class-string="car.carId==selectedCar.carId?'selected':''" template="'partials/cars/cars-template.html'"></item-list>
</div>
list-tab.html
<div class="form-group">
<div class="search-field">
<label for="searchField" id="searchLabel">Search</label><br/>
<input type="text" ng-model="query.value" placeholder="{{searchPlaceholder}}"/>
</div>
<table class="table table-hover>
<tbody>
//The controller scope houses currentPage; an independent control facilitates user navigation through pagedItems by updating currentPage which reflects here
<tr ng-repeat="item in pagedItems[currentPage]" ng-click="clickFunction($index) ng-class="classString">
<td ng-include="infoTemplate"></td>
</tr>
</tbody>
</table>
</div>
cars-template.html
<div class="row form-inline" id="{{item.carId}}">
<div class="col-md-2">
//A method on the controller scope is employed to format the URL
<img ng-src="{{retrieveIcon(item.iconUrl)}}" height="75px" width="75px"/>
<div class="col-md-10">
<div details-pane" id="carDetails" ng-include="'partials/cars/car-full-details.html'"></div>
<div class="item-title">{{item.name}}</div>
//Subsequent sections entail a table showcasing more item information such as description, mileage, etc...
</div>
</div>