I am still new to directive so unable to fully understand how it works, hoping some one will be able to help me pass a scope variable to the directive when user clicks an item on the ng-repeat.
the code looks like this
html
<tr ng-repeat='item in loadSummaries.items' ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
<td>{{item.ShipmentId}}</td>
<td><button ng-click="showDetails(item)">details</button></td>
</tr>
the directive gets injected as below
<div id="searchRoot" class="embed-edit-item-form">
<div id="content-outer" class="row">
<div id="form-holder">
<div id="edit-form-content">
<div id="edit-form-content-inner" style="background-color: transparent">
<div ng-include src="'Client/Views/Shipper/shipment_details.html'">
</div>
</div>
<div class="clear" style="clear: both">
</div>
</div>
</div>
</div>
controller
$scope.showDetails = function (item) {
$scope.Message = "Details Clicked";
$scope.$broadcast('event:show-edit-form', item);
}
and the directive. EDIT 2
app.directive('embedEditItemForm', function () {
return {
restrict: 'C',
template: "<div></div>",
transclude: true, //use transclusion
scope: {},
link: function (scope, elem, attrs, controller, linker) {
linker(scope, function (clone) { //bind the content inside
elem.children().eq(0).append(clone); // add content to DOM
var bidHolder = elem.find('#form-holder');
var searchResult = elem.find('#searchResult');
bidHolder.hide();
scope.$on('event:show-edit-form', function (item) {
scope.Shipment = item;
searchResult.hide();
bidHolder.slideDown('slow', function () {
});
});
scope.$on('event:close-edit-form', function () {
searchResult.show();
bidHolder.slideUp();
});
});
}
}
});
Issue I am having is how to pass the item from the ng-repeat in to the 'shipment_details.html' so that I can show more details there. the code in the directive scope.Shipment = item;
is not working.
EDIT 1 The complete Partial Page as below:
<div id="searchRoot" class="embed-edit-item-form">
<div id="content-outer" class="row">
<div id="form-holder">
<div id="edit-form-content">
<div id="edit-form-content-inner" style="background-color: transparent">
<div ng-include src="'Client/Views/Shipper/shipment_details.html'">
</div>
</div>
<div class="clear" style="clear: both">
</div>
</div>
</div>
</div>
<div id="searchResult">
<div infinite-scroll='loadSummaries.nextPage()' infinite-scroll-disabled='loadSummaries.busy' infinite-scroll-distance='1'>
<table class="table">
<thead>
<tr>
<th>Shipment ID</th>
<th</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in loadSummaries.items'>
<td>{{item.LoadId}}</td>
<td><button ng-click="showDetails(item)">details</button></td>
</tr>
</tbody>
</table>
<div ng-show='loadSummaries.busy'>Loading data...</div>
</div>
</div>
Regards Kiran