0

So, I'm looking to use ui.bootstrap.tooltip to appear when an element in a form is invalid.

I'm using a directive to do this - it's a bit ugly, but it works. Except for one thing - the controller isn't seeing the updated model values due to another scope being created in the directive.

I can get the model value through the form and using $viewValue, but this seems a bit "unclean" to me.

Also, is there a better way to get the "tooltip element", that I'm using elem.parent().children()[2]; for? I suppose I could create a <template> in the directive for all this.

The JSFiddle is at: http://jsfiddle.net/n8vNw/2/

mmilo
  • 806
  • 11
  • 18
  • 1
    Have you check existing bootstrap tooltip implementation with angular ? https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js – vittore Jun 07 '13 at 00:04
  • I am already using that tooltip. Correct me if I'm wrong, but it doesn't have a useable API, so I activate it using jQuery and trigger(). – mmilo Jun 07 '13 at 00:36
  • 1
    Check this question http://stackoverflow.com/questions/16651227/enable-angular-ui-tooltip-on-custom-events – vittore Jun 07 '13 at 01:45

1 Answers1

1

You have created a parser function but never return a value from it. A parser function is used to parse the input value before it ends up in your model. Since a value never is returned, $scope.email will always be undefined.

Secondly there's no reason for your directive to create an isolated scope since you don't use that anyway, unless you're not showing us all the code--in such case us the $parse service instead.

Regarding how you access the tooltip element, perhaps let your formTooltipError directive create and add the element using the $compile service. (I haven't used Angular Bootstrap so there might be an easier/better answer.)

Updated fiddle.

Martin
  • 8,876
  • 2
  • 35
  • 36
  • There isn't a need for an isolated scope, but my understanding was that one was created when I included ngModel in the directive. Thanks! – mmilo Jun 07 '13 at 13:16