1

I have a control that should display breadcrumb navigation. It needs data (route & title) to display the navigation correctly. Data is taken from scope and used inside a directive.

What causes my problems is that I use a localization directive in the control that should translate the title. And this localization directive is called even when expression in ng-show is evaluated to false. Then the translation in localization directive ends with exception because it tries to translate incorrect string (see 'localize' directive in http://jsfiddle.net/F97wn/7/).

That seems quite weird. I would expect that if something sets whether the inner content should be visible or hidden, then it is evaluated first and then the inner content..

Ok, then I found that ng-show only sets some css attribute, so it's quite useless for me.

The question is: How should I solve the problem - what to use instead of the ng-show?

An example is at http://jsfiddle.net/F97wn/7/

joragupra
  • 692
  • 1
  • 12
  • 23
stej
  • 28,745
  • 11
  • 71
  • 104

3 Answers3

2

You could use ngSwitch instead with the on part set to "toshow()" and the inner ng-switch-when="true" part to have your custom directive inside that area. This will then not execute the custom directive if the value of toshow is not true.

Ryan O'Neill
  • 3,727
  • 22
  • 27
  • 1
    ng-switch will remove / add parts of the DOM, that's why this works. http://stackoverflow.com/a/13461492/215945 – Mark Rajcok Dec 12 '12 at 18:50
1

If the directive is throwing an exception, more information should probably be passed to the directive, in one of the following ways, so that the directive can decide if it has the required information to do what it needs to do:

  1. attribute data -- e.g., localize="..." show-me="..."
  2. something defined on the scope associated with ctrl -- e.g., $scope.showMe. The directive scope will have access to this property as scope.showMe, based on the way you currently have the directive defined.
  3. or inject a service (that has the data) into the directive -- e.g., directive('localize', function(myShowMeService) { ... }
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
  • Those solutions look like workarounds for this situation. That's why I was looking for a solution provided by angular itself. Anyway, thanks for answer and for the comment above. +1 – stej Dec 13 '12 at 06:46
  • @stej, consider thinking about it this way instead: if the directive is in the DOM, it is going to "run". IMO, having to write additional HTML/directives to take the breadcrumb directive out of the DOM (under certain circumstances) so it won't run is a workaround. If you intend to reuse this breadcrumb component in other projects, I think it would be better to make it independent/self-contained, and not have it require additional HTML/directives in order to use it. IMO, the "Angular solution" is to write a slightly more complicated directive by giving it some additional attributes. – Mark Rajcok Dec 13 '12 at 16:08
0

You might also want to look into <ng-if>. The ngIf directive removes and recreates a portion of the DOM tree (HTML) conditionally based on "falsy" and "truthy" values evaluated within an expression. It might be more intuitive than <ng-show> for your needs.

However, it is currently only available in the unstable version of AngularJS. If you can use that version of AngularJS you can find more information about it here.

SnapShot
  • 5,464
  • 5
  • 42
  • 40