0

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

Kiran
  • 2,997
  • 6
  • 31
  • 62

1 Answers1

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

Community
  • 1
  • 1
Khanh TO
  • 48,509
  • 13
  • 99
  • 115
  • I don't have an issue with the broadcast. that's all working fine. Issue I have is that the `scope.$on('event:show-edit-form', function (item)` is receiving the correct item, but i don't know how to set it as a scope for the div on which the directive is applied. BTW I don't understand what you mean by the parent child relationship. – Kiran Apr 06 '14 at 12:01
  • @Kiran: scopes in angular are inheriting, so there are child/parent relationships between scopes. I misunderstood your problem. Can you show me where you use your `embedEditItemForm` directive and how your `shipment_details.html` looks like? I guess there is an element `searchResult`, but I'm not sure – Khanh TO Apr 06 '14 at 12:07
  • I have added the partial page where it fits. I think i get what you are saying, as I have the 2 div in the same level, the scopes are not properly setup due to `ng-repeat`. is it possible to define a separate controller instance for the directive to overcome this issue? – Kiran Apr 06 '14 at 12:16
  • I did make the changes you suggested as you can see in the updated post, but now the issue is that `infinite-scroll='loadSummaries.nextPage()'` is not working. looks like its messing up that scope. how can i retain that scope? – Kiran Apr 06 '14 at 14:08
  • @Kiran: hmm, my bad. I did not see that your div with directive also wraps the `searchResults`. See updated answer. – Khanh TO Apr 07 '14 at 13:52
  • @Kiran: I added more information to the answer to make it clearer. Hope it helps you more. – Khanh TO Apr 12 '14 at 09:55