Angularjs directive change scope variable

Question

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

Answer 1

As stated in the docs:

In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.

Your content needs to inherit from your directive's scope to work. In this case, a simple solution is to avoid using isolate scope by removing scope:{}.

I'd like to point out why this is the expected behavior of angular. Transcluded content is arbitrary, so it should not have knowledge about your directive's implementation detail (what is available to use).

If you decide that the transcluded content belongs to the directive, it makes more sense to make it part of the directive's template (don't use transclusion).

For more information:

Transclusion and scopes in angular: Why is this not working?

Why ng-transclude's scope is not a child of its directive's scope - if the directive has an isolated scope?

Confused about Angularjs transcluded and isolate scopes & bindings