Is there any directive to affect immediately between controller and view except ng-model?

191 views
Skip to first unread message

Sowmiya

unread,
Feb 26, 2014, 10:19:04 AM2/26/14
to ang...@googlegroups.com
Hi,

  Is there any directive to affect immediately between controller and view except ng-model?

Luke Kende

unread,
Feb 27, 2014, 1:43:39 AM2/27/14
to ang...@googlegroups.com
what do you mean? pretty much all directives are "immediate".

ng-bind
ng-include
ng-show/hide
ng-switch

and so on

Sowmiya

unread,
Feb 27, 2014, 8:12:31 AM2/27/14
to ang...@googlegroups.com
Hi,

I'm trying to show the message in popover/tooltip  when text box satisfied the below conditions

1.Only allows number and 12 digits too.

Here,

I have created the custom ng-enter directive to allow key code = 13.
I'm using ng-pattern="/^\d{12}$/" for above mentioned conditions.

Now I have call one method for getting data in server when the above conditions are satisfied.
If that number is not present in server, popover will come with some message like "this requested no is not found"
I have call this popover in method failure callback.
Here is the problem

when I sent the request,that req will fails and it goes to failure callback, but popover does not initialized.SO It wont come.
If I enter 2nd time,it comes.

I have trigger th popover like below,

.config(['$tooltipProvider', function($tooltipProvider) {

$tooltipProvider.setTriggers({
'keypress': 'mouseleave',
'never': 'keydown'
  });
}])

I think its the time delay of calling popover trigger?
Can u solve it?

Luke Kende

unread,
Feb 27, 2014, 1:47:18 PM2/27/14
to ang...@googlegroups.com
I don't completely understand what you are trying to do, but I'm guessing that I might set the tooltip triggers to just use { focus : blur } so that the tooltip is always open when a user is typing, then change the tooltip text according to events:

<input type="text" ng-model="inputField.text" tooltip="{{inputField.tooltip}}" ng-enter="inputField">

//in controller
$scope.inputField = {
  text: null,
  tooltip = "Please enter a 12 digit number"
}

//on press enter in directive
attrs.inputField.tooltip = "Verifying number..."

//on return from server call when error:
$scope.inputField.tooltip = "Invalid number"

Does this give you the idea?

Otherwise, you can only use basic input events, not customer functions or custom events to pass to setTriggers()... it won't work.  You can look at the source code here:


--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/DW20vf3nrgM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

Sowmiya

unread,
Feb 28, 2014, 1:50:43 AM2/28/14
to ang...@googlegroups.com
Hey Luke,

 You understood very well about my issue.Thanks.

Here I'm not initialize the tooltip as red color text.

$scope.inputField = {
  text: null,
  tooltip = "Please enter a 12 digit number"
}

I have used ng-minlength="12" ng-maxlength="12" ng-pattern="/^\d{12}$/"  and ui bootstrap
So text box will appear in red color when we type > or < numbers.Only valid in 12 digits.

When we enter 12 digits, req will fails and it goes to failure callback.That time tooltip is not getting initialized.
Second time i'm enter the same,its loaded already.So it comes.
Also Second time  i'm enter another 12 digits which is not present in database, i'm getting previous message in tooltip for a sec then it shows the another number.

Is this problem due to delay in  angular and tooltip ?

Have u solution to solve?

Luke Kende

unread,
Feb 28, 2014, 2:42:03 AM2/28/14
to ang...@googlegroups.com
Hard to know without seeing it.  It sounds like your problem is that you want the tooltip to show on custom events, like on failure callback (I'm assuming the field has lost focus at that point and the tooltip is not showing but you want it to after it fails).  The example I was giving you was to keep the tooltip open and just change it's text value. 

What I've done to get around issues like this is either modify the ui-bootstrap source, or, copy the code and modify it to suit my needs.  The link I gave you references the source.  By copying and renaming the provider for tooltip, to something else and include it as part of your own services, then you can modify it without worrying about updates to ui-bootstrap.

Sorry, I do not have a simple fix for you other than that.

Good luck.


Sowmiya

unread,
Feb 28, 2014, 4:04:08 AM2/28/14
to ang...@googlegroups.com
Luke,

Thanks for your suggestion.
Reply all
Reply to author
Forward
0 new messages