The documentation for ui-jq still refers to ui.config and a jq key. It appears during refactoring (master v.0.0.2) a change was introduced that did two things:

1. ui-jq now expects a 'uiJqConfig' instead of 'ui.config'.
2. the options no longer expect a jq key.

So one workaround is to roll with the change, and provide a 'uiJqConfig' value without a jq key. That worked.

However, the documented behavior could easily be restored in modules/jq/jq.js by

angular.module('ui.jq',[]).
  value('ui.config',{}).
  directive('uiJq', ['ui.config', '$timeout', function uiJqInjectingFunction(uiJqConfig, $timeout) 

and

 var options = uiJqConfig && uiJqConfig.jq && uiJqConfig.jq[tAttrs.uiJq];

Or something similar?

I have a situation where some items in a collection are dependent on a "ui-if" condition to render. The problem is that, when they render, they appear below the items without an "if" condition.

<tab>
    <pane ui-if="someCondition"></pane>
    <pane></pane>
</tab>

Here's how it actually gets rendered:

<div class="tab">
    <div class="pane"></div>
    <div class="pane" ui-if="someCondition"></div>
</div>

I realize this is probably because the directive needs to watch the attr, so it takes longer to process. However, I wonder if the directive append logic could be changed so that we could preserve the order of html elements.

On HTC Sence (Android 4.0.3), if input type="tel" then the behavior is very hieratic, and the input is unusable.
It seems that there is a problem with some Android devices : digitalBush/jquery.maskedinput@905a53d
Do you think that it could be the same cause?

Thanks

I think that it's no longer relevant since you can pass an object to ng-class these days. @dandoyon is there anything else currency really did?

I mean we can do stuff like:

<span ng-class=" { red: funds < 0, black: funds > 0, gray: funds == 0} ">...

Is it really giving us anything else?

Running the command
sudo npm -g install grunt-cli karma bower
produces the errors below.

npm ERR! node -v v0.10.13
npm ERR! npm -v 1.3.2

Debug Log: https://docs.google.com/file/d/0BwV7xb-E6LSNU2MwN0ZnakxwMmc/edit?usp=sharing

> [email protected] install /usr/local/lib/node_modules/karma/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  SOLINK_MODULE(target) Release/bufferutil.node
  SOLINK_MODULE(target) Release/bufferutil.node: Finished
  CXX(target) Release/obj.target/validation/src/validation.o
  SOLINK_MODULE(target) Release/validation.node
  SOLINK_MODULE(target) Release/validation.node: Finished
/usr/local/bin/karma -> /usr/local/lib/node_modules/karma/bin/karma
npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/couch-login requires request@'~2.9.202' but will load
npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/request,
npm WARN unmet dependency which is version 2.21.0
npm ERR! peerinvalid The package karma does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants karma@~0.9

npm ERR! System Darwin 11.4.2
npm ERR! command "/usr/local/bin/node" "/usr/local/bin/npm" "-g" "install" "grunt-cli" "karma" "bower"
npm ERR! cwd /Users/per/Workspace/ng-boilerplate
npm ERR! node -v v0.10.13
npm ERR! npm -v 1.3.2
npm ERR! code EPEERINVALID
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/per/Workspace/ng-boilerplate/npm-debug.log
npm ERR! not ok code 0

Hello. I tried an input field with type="number" and mask="99%" with bootstrap styling. The appearance works correctly but I cannot type in any value, the ng-model's value predefined in controller doesn't show up.

The reason for using type="number" is for the convenience of min/max/required.
http://docs.angularjs.org/api/ng.directive:input.number

Any ideas?

It is strange to write

<textarea ui-keypress="{
    13: 'keypressCallback($event)'
}">

Should simply be

<textarea ui-keypress="{
    13: keypressCallback($event)
}">

'keypressCallback($event)' makes it look like a string literal while in fact it is not.

I am intersted a mask feature for optional numbers. So for example, you could have value of 9000 but show $9,000

We have the following scenario:

We have a database to be updated manually, to do this we have a html interface with angular, some of the data is not compatible with the new format we want to implement, so when the page loads and runs angular values inputs are lost.

Ej,

Actual data on database: "56-58-01-40" OR "5659068 AL 71"

How it should be after editing: "56580140" OR "5659068"

Is there a way to prevent the wrong value of the mask to be cleared automatically? While keeping the field invalid? This would be good also while filling a form, it is bad UX to force the user to fill all the data again if he writes it wrong.

Would it be possible to add an optional attribute to the UI-validate directive to return the original field value even if the validation fails?

The reason for this is that we have multiple validation checks against a single field and once one fails the field value is set to undefined and therefore the rest fail. I have made some changes to our local version of UI-validate (as below) and would just require the front end to have a return-invalid-value="true" flag to work.

  var returnInvalidValue = scope.$eval(attrs.returnInvalidValue);

  angular.forEach(validateExpr, function (expression, key) {
    validateFn = function (valueToValidate) {
      if (scope.$eval(expression, { '$value' : valueToValidate })) {
        ctrl.$setValidity(key, true);
        return valueToValidate;
      } else {
        ctrl.$setValidity(key, false);
        if (returnInvalidValue){
          return valueToValidate;
        }
        else return undefined;
      }
    };
    validators[key] = validateFn;
    ctrl.$formatters.push(validateFn);
    ctrl.$parsers.push(validateFn);
  });

Hi,
Looking at the bower.json file, I was wondering why the main is pointing to a non existing file (i.e. ./modules/ui-utils.js).

As a consumer of ui-utils, I would expect to download it with bower, and then using it's bower.json main property to dynamically load what's needed. I don't think the build step with grunt should generate that file as it means to me that it requires an extra 'build time' step to consume it in my web application.

As per discussion in #22

When using bower to install ui-utils, when I install the latest it shows the following bind call in scrollfix:

$target.bind('scroll.ui-scrollfix', function () {

Which breaks scroll fix, I assume it should be

$target.bind('scroll', function () {

As it is in git.

Considering the password example ui-validate password demo

When I type 123 into the password field
And then type 123 into the confirmation field
And then backspace one character in the confirmation field
And then backspace one character in the password field
Now both password and confirmation are both 12; however, a match is not detected

My guess is this has something to do with models being set to undefined when they are invalid.

With jquery.inputmask, you can supply multiple masks as an array:

$('#phone').inputmask({ mask: ['999-999-9999', '+099 99 99 9999[9]']});

I don't see a way to do this with ui-mask. Setting an array in the ui-mask object causes the array to render as a string.

Is it possible to exclude some object properties from filtering, or only set which attributes should be search through?

For example I got object:
user {
id: '123',
name: 'Arkadiusz Putko',
phone: '456 789 789'
}

When I filter user like:
typeahead="user for user in users | filter:$viewValue"
this user will be find when I type '123' but I want to avoid this situation - clients are confused Why the user is found if there is no match for "123" in name, and phone, and they have no idea about ID.

@shaungrady this will likely be the new home of ui-mask assuming that there is no longer external dependencies of the directive(?).

For now, I'm going to put all directives/filters/whatever without external dependencies in this package until we decide otherwise.

Unfortunately, the one part of this refactor that still hasn't been sorted out is generating docs (which means I still don't know where you should put your DOC updates atm). As for the build file, this will probably be one of the few repos that needs to be built so I think we are going to avoid standardizing the build across all repos (but maybe this can share build-code with bootstrap).

The docs however we want to standardize across the board.

Hi,

I've just started to backport my patch related to this issue angular-ui/angular-ui-OLDREPO#536

If I have well understood, angular-ui will progressively move here, for all directives with no external deps.

I've met some issues to start developping on it:

• No gruntfile (=> no server, watch target)
• No browser specified in Karma conf
• Bower modules not included in the repo (maybe it's wanted?)
• Keypress directive specs are still related to jQuery (in createKeyEvent: var keyEvent = jQuery.Event("keydown");)

Am I missing something?

A project find shows no results for 'uiIf'. Is this supposed to be in here or not?

I tried squashing most broken tests. Because of the attempt to remove jQuery as a dependency, I am having difficulty fixing the remaining tests.

I don't know the Angular equivalents to certain items such as jQuery.event and jQuery.fn.whatever which is needed to close the remaining tests.

Hi,

I would like to manage a set a keyboard shortcut in my app (like in gmail, you can create a mail with a shortcut, you can reply with a shortcut...)

I already use angular-ui in my app and I would like to know if I can use keypress to do it ?

I tried to use keypress on a div without success.

Best regards, and thanks for all the stuff you do for JS/Angular ecosystem !

hi,
the pass through is life saver, thank you for it, but i am lust on how to add multiple plugins to an element and have their options set.

for example

<div  ui-jq="tooltip" ui-options="{position:'left'}"
 ui-jq="noUiSlider"    ui-options="{range: [0, 100], start: 50, handles: 1}">
Multiple Jquery Plugins
</div>

thanks in advanced

Just noticed the Tons of Damage, out of curiosity, not really a question :P

This bug becomes obvious when trying to use Google maps without jQuery library included.

GoogleMaps event listeners, e.g. map-idle, map-click inside of ui-event require jQuery for event binding. jQuery is listed as "optional" in the documentation.

It's true for uiEvent from https://github.com/angular-ui/ui-utils
And latest uiMap from https://github.com/angular-ui/ui-map/

Linked issues:
angular-ui/angular-ui-OLDREPO#552
angular-ui/ui-map#3

Hi, I'd like to access accordion's transcluded content in my parent directive but I'm really lost.

I've written a plunkr here.

My goal is to access the input (to add bindings on it later).

Any idea how to get this element please?

Hi! jQuery oldest v1.8.3 $.browser has been removed.

Masked Input in angular-ui repository has 1.3 version. The plugin using $.browser it not compatable with latest jQuery.

I see Masked Input v1.3.1 - https://raw.github.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.js
It has no $.browser usage.

Currently Validate is breaking from the latest bower release. I would request that a new patch release 0.0.2 be put out to bower to captures the fixes that have already been applied to the repository.

The ScrollFix module binds a listener to the scroll event, but it does not set the initial state.

Instead of

$target.bind('scroll', function () {...});

I'd make it

var scrollListener = function () {...};
$target.bind('scroll', scrollListener);
scrollListener(); // sets the initial state

Should have angular.module('ui-utils', [...]) with all modules concatenated and listed in the array.

Go to http://angular-ui.github.io/ui-utils (scroll to bottom if that needs saying)

Enter [email protected]. Note the same validation results as [email protected]. They should be different of course given one is in a blacklist.

I'm currently trying to upgrade from/to:

angular-ui 0.1.0
angularjs 1.0.4
jquery 1.9.1

angular-ui 0.3.0
angularjs 1.0.6
jquery 2.0.2

And that gives me some troubles. It would be nice if there was a wiki page with the upgrade steps. For example I've found this stackoverflow question http://stackoverflow.com/questions/12472244/how-to-integrate-angularui-to-angularjs it has a jsfiddle which doesn't work anymore, then another one that's broken too. The correct answer seems to be the last one with 0 votes (!) by durilka.

I came that far, and now realize that uiIf doesn't exist anymore (no error message). Apparently angular now has that natively, but only in newer (unstable) versions.

As per comment on #28 (comment)

Unique (and other utilities?) do not currently accept arbitrary angular expressions. This might be desirable, hence this issue.

I've made a quick demo with 2 inputs.
My form should be valid if input 1 value length is shorter than input 2 value.

It looks like when my validation function return false, ng-model from input 1 is not set anymore.

http://plnkr.co/edit/GP4FbX1m4Q37hULQzMPt?p=preview

(Just type something in the first input, ng-model (myText1) doesn't change)

Selecting and deselecting masked textbox (input) inside a form makes the form invalid, when using ng-required.

Check out this Plunker for an example of this.
http://plnkr.co/edit/7DKExnR1cl3WyB15dSu3?p=preview

Use case: a form with masked fields that dynamically change from required to not required based on other user input.

As part of the 'break up' of AngularUI in to sub-projects, the documentation for 'ui-if' seems to have become lost, or at least is not present on the Angular UI site docs page here: http://angular-ui.github.io/ui-utils/

Also, I note that the links on http://angular-ui.github.io/ for each of the UI-Utils modules seem to be broken now. For example, click on 'Scrollfix', which links to https://github.com/angular-ui/ui-utils#scrollfix, it doesn't seem to go anywhere specific to Scrollfix. I assume it should now link to http://angular-ui.github.io/ui-utils/#/scrollfix.

Right now the mask module is very limited to simple regexes and digits. Would be nice to have a clearer way to (just brainstorming):

• Add an option to use regex, might be hard to parse it and display a proper input placeholder

Usage example:

<input ui-mask="/[a-f0-9-]{32}/">

• Add a optional group of characters

Usage example, using backticks to make it optional:

<input ui-mask="A`-AAA`-999">

Making it able to write B-718 as B-XYZ-819

• Add a switch-case functionality

Usage example:
<input ui-mask ui-options="{switch: model[0]}" ng-model="model" ui-when="{'1':'(99) 99999-9999',else:'(99) 9999-9999'}">

Then for example, when the mask starts with 1, apply a diferent mask, else, apply
another mask (here in Brazil, the state of São Paulo got phone numbers that are 
(11) 99999-9999 and the rest of states are (21) 9999-9999

• Make it possible to pass in a function to determine the mask (guess it would fix the above two problems)

Usage example:

<input ui-mask="func()">

[...]
angular.controller('TestCtrl', function($scope){
  $scope.func = function(){
    return function(){
      //(re-)apply mask depending on value, would this be called everytime a model is changed?
    }
  };
});

<input type="text" ui-mask="whatever" /> getting autofocused in IE10 after mask is applied.

When I use the directive with ui ui-date-mask, to make the blur event, the following error occurs:

Error: $apply already in progress

This error points to the directive ui-date, when the blur event is fired: angular-ui.js line 271

I think this one $apply simultaneous occurring in ui-date and in-mask.

Each directive/filter should now become it's own module and the tests should be updated to reflect this.

Steps to reproduce:

1. Type "hello" in the first password field
2. Type "hello" in the second password field (everything works!)
3. Add a "d" to the second password field so you have "hellod"
4. Add a "d" to the first password field so you also have a "hellod"

Error! Angular didn't detect they are equal!

Works fine in Safari. Thought the alert was being blocked by Chrome but looks like it does not hit the breakpoint in the callback in chrome either.

The package.json and bower.json files both list the version as 0.0.3 but there is no tag associated with that version, so we are unable to use 0.0.3 from Bower.

For a project, I had to manually include uiRoute so it would work with uiRouter because listening for $stateChangeSuccess, even though added a while back, was added after 0.0.2.

Can we add a tag for 0.0.3? Thanks!

Is there any way to integrate both directives ui-mask and ng-list?

<input type="text" ng-model="newAttr.period" placeholder="i.e. 1995 ~ 2000" ui-mask="9999 ~ 9999" ng-list="~">

This returns ["19992005"] but the expected result would be ["1999","2005"] as it works without the ui-mask directive.

Is there any solution to this at this time?

Thank you.

The attribute ui-date-format should allow the use of an expression, to get the attribute dynamically from an scope variable:

app.directive('checkin', function(){ 
return {
  replace: true,
  template: "<input type="text" ng-model="$parent.date" ui-date-format="{{dateOptions.dateFormat}}" ui-options="dateOptions" ui-date>",
  link: function($scope){
    $scope.dateOptions = {
          dateFormat: 'dd/mm/yy'
          maxDate: '+1M'
          minDate: 0
          setDate: 0
          changeMonth: true
    };
  }
}

watching the uiDateFormat directive, the correct value (dd/mm/yy) is being passed to the directive, but the ui-date doesn't seem to be using it.

uiDate
    "dateOptions"

uiDateFormat
    "dd/mm/yy"

(breakpoint on line link : function (scope, element, attrs, modelCtrl){, I'm inspecting the attrs variable). The thing is, dateFormat is showing as (empty string), on line var dateFormat = attrs.uiDateFormat || uiDateFormatConfig;

ff5e5b4 "Removed uiIf since ngIf has been added to core", but http://angular-ui.github.io/ui-utils/ still references "ui-if" under the "route checking" section.

Also just want to note that since ngIf has not yet landed in a stable release of Angular, this forces your users to have to either stay stuck on ui-utils 0.0.2, or to upgrade to Angular 1.1.5. Would have been nice to wait for it to land in a stable Angular release, but if keeping ui-if around posed a big maintenance burden, fair enough.

I wrote validation expression that depends on more than one element of scope (other than $value that is validated).

Currently ui-validate-watch supports revalidation only when one scope member changed.

To support ui-validate-watch looking after any count of expressions I re-wrote part responsible for ui-validate-watch.
After that fix following constructions allowed:
ui-validate-watch="['expression1', 'expression2', ...]" - all validators will be re-validated if any of expressions changes.
ui-validate-watch="{is_my_check_passed: ['expression1', 'expression2', ...]}" - validator with key 'is_my_check_passed' will be re-validated if any of expressions changes.
All old variants work as well.
Below is code for that fix:

  // Support for ui-validate-watch
  if (attrs.uiValidateWatch){
      apply_watch( scope.$eval(attrs.uiValidateWatch) );
  }

  function apply_watch(watch)
  {
      //string - update all validators on expression change
      if (angular.isString(watch))
      {
          scope.$watch(watch, function(){
              angular.forEach(validators, function(validatorFn){
                  validatorFn(ctrl.$modelValue);
              });
          });
          return;
      }

      //array - update all validators on change of any expression
      if (angular.isArray(watch))
      {
          angular.forEach(watch, function(expression){
              scope.$watch(expression, function()
              {
                  angular.forEach(validators, function(validatorFn){
                      validatorFn(ctrl.$modelValue);
                  });
              });
          });
          return;
      }

      //object - update appropriate validator
      if (angular.isObject(watch))
      {
          angular.forEach(watch, function(expression, validatorKey)
          {
              //value is string - look after one expression
              if (angular.isString(expression))
              {
                  scope.$watch(expression, function(){
                      validators[validatorKey](ctrl.$modelValue);
                  });
              }

              //value is array - look after all expressions in array
              if (angular.isArray(expression))
              {
                  angular.forEach(expression, function(intExpression)
                  {
                      scope.$watch(intExpression, function(){
                          validators[validatorKey](ctrl.$modelValue);
                      });
                  });
              }

          });
      }
  }

Sorry, I have not time to create normal pull request.

@douglasduteil think you could take a look at this? Seems angular is not working on any of the demos.

Not sure if this still applies since the docs have completely vanished now:

Since scrollfix makes use of elem.offset(), jQuery is required.
It would be good to mention this in the docs to avoid confusion. :)

We are having problems with route.js.
The error is the following: "ReferenceError: hash is not defined"

It referse to Line25 and Line35:

     if ((hash = newVal.indexOf('#')) > -1){

The problem is the allocation and definition of "hash" inside the if-statement.
Is there a reason why you do it that way?
Our solution is to define and allocate "hash" outside the if-statement:

    var hash = newVal.indexOf('#');
    if (hash > -1){

This way it should work always.

After looking at the file for some time I made it work by removing the '.ui-scrollfix' in 'scroll.ui-scrollfix' on line 25.

I'm not sure if it has an intended use that I can't see in my sleep deprived state, that's why I'm leaving it as an issue.