Hello,
I have a custom directive that works fine when used as an attribute
directive (angular version 1.3.2).
When I try to switch it to an Element, then the events from other services
and controllers that are sent with $broadcast and $event (depending if they
are up or down in the DOM hiearchy) are no longer propagated when they are
triggered from inside the template, or from other services. Events just
seem to be ignored.
There should not be any difference if the directive is used as an Element
or as an Attribute right?
Or am I missing something here?
I have something like:
<div id="contentBottom" ng-controller="navigationControler as
selectionBottom">
<*div navigation-block*="contentBottom"/>
<table class="listing narrow" ng-controller="tableController as
tableBottom">
<thead>
<tr>
...
</tr>
</thead>
<tbody>
<tr table-content-row="contentBottom"></tr>
</tbody>
</table>
</div>
This works fine, all events that are triggered from the table directive get
propagated to the navigation controller.
So when working with an attribute directive, all works fine.
But when I change the navigation-block to an element like this:
<div id="contentBottom" ng-controller="navigationControler as
selectionBottom">
<*navigation-block* navigation-block="contentBottom"/>
<table class="listing narrow" ng-controller="tableController as
tableBottom">
<thead>
<tr>
...
</tr>
</thead>
<tbody>
<tr table-content-row="contentBottom"></tr>
</tbody>
</table>
</div>
then events are no longer working.
Is this expected behaviour, or is there something else I need to change
when working with element directives?
The controller name is used to make a datalist id unique, so if this works
for an attribute, it should make no difference for an element - it is the
same template.
If you really want to know what is inside the template, here it is:
<div class="ym-fbox">
<div class="backButtonBlock"><a href="#" class="folderUpLink"
ng-click="parentFolder();"> <img class="folderUpImage"
ng-src="../img/icon_up_small.png" src="icon_up_small.png"/></a></div>
<div class="selectorBlock">
<input type="text" id="locationTop" name="locationTop"
ng-keypress="showNewLocation($event);" ng-model="location" style="width:
100%" list="{{controllerName}}Locations"/>
<datalist id="{{controllerName}}Locations">
<option data-ng-repeat="favorite in favorites" value="{{favorite}}"/>
</datalist>
</div>
</div>
The directive is defined like this:
selectionModule.directive('navigationBlock',
['$log', 'selectionData',
function($log, selectionData) {
return {
restrict: 'AE',
link: function(scope, element, attributes) {
// Normally this will contain the name of the controller.
scope.controllerName = attributes.navigationBlock;
},
replace: 'true',
templateUrl: 'angular-templates/navigation-block.html'
};
}
]
);
I really don't see why this would make a difference for the events, since
the hiearchy in the DOM model does not change.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
