Directive ng-show alternatives

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/

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.

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) { ... }

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.