angular-ui / angular-ui-oldrepo

DISCONTINUED REPO: This project has been restructured ->

AngularUI - The companion suite for AngularJS

---

Usage

Requirements

• AngularJS v1.0.0+ is currently required.
• jQuery / Plugins (depends on directive). Check specific directive dependencies for more information

Installation

The repository comes with the modules pre-built and compressed into the build/ directory.

angular.module('myApp', ['ui']);

The modules can be found in the Directives and Filters folders. Check out the readme file associated with each module for specific module usage information.

Development

You do not need to build the project to use it - see above - but if you are working on it then this is what you need to know.

Requirements

0. Install Node.js and NPM (should come with)

1. Install local dependencies:

$ npm install

2. Install global dependencies grunt, coffee-script, and testacular:

$ npm install -g testacular coffee-script grunt

Build Files & Run Tests

Before you commit, always run grunt to build and test everything once.

$ grunt

Test & Develop

The modules come with unit tests that should be run on any changes and certainly before commiting changes to the project. The unit tests should also provide further insight into the usage of the modules.

First, start the testacular server:

$ grunt server

Then, open your browser to http://localhost:8080 and run the watch command to re-run tests on every save:

$ grunt watch

Publishing

For core team: if you wish to publish a new version follow these steps:

1. Bump the version number inside package.json
2. Build and test
3. Commit the updated package.json and build/ folder on their own commit
4. Tag the commit: git tag v[maj].[min].[patch]
5. Push the tag: git push [angular-ui] master --tags

angular-ui-oldrepo's Issues

angular ui , lastest angular version

hi,
I have tried to update angular version to the latest version but angular-ui module doesn't work anymore.
I'm encountering the problem with the ui-date directive. It is due to the change of isolate scope bindings definition.

Thanks

Enhance documentation for requirements

What version of angular is required should be described in README.md

LazyLoader for assets

I am currently researching how to lazy load javascript (and potentially css) files into my page. If this isn't natively supported by angular, but a helper approach is developed, this would definitely be something to throw into the project.

Worth checking out: https://github.com/cmelion/angular-yepnope
However I would personally prefer a solution with 0 dependencies

CodeMirror throws an error if model isn't initialized

CodeMirror apparently does not take kindly to falsey non-string values (NaN, undefined, etc).

I tried the following fix:

ngModel.$render = function() {
  if (ngModel.$viewValue) {
    codemirror.setValue(ngModel.$viewValue);
  } else {
    codemirror.setValue('');
  }
};

However this actually causes another $apply() to fire since the model value is changed from undefined to '' (empty string).

Grid sorter

This http://jsfiddle.net/dalcib/6kabF/2/

And This: https://groups.google.com/forum/#!topic/angular/vM2DEMK_NMA/discussion

F*cking awesome. We need it.

select2 with multiple are broken even after e1b22f545a

select2 with multiple are broken even after e1b22f5

Tried as a select (rendered but selection either cleared all items or kept shifting items)

%select#project_template_groups{"ng-model" => "project_template.group_ids", "ui-select2" => "", "ng-options" => "group.id as group.name for group in groups", "ng-multiple" => "1", "multiple" => "1"}

Unable to get it working when an input type=hidden

%input{:type => "hidden", "ng-model" => "project_template.group_ids", "ui-select2" => "", "ng-options" => "group.id as group.name for group in groups", "multiple" => "1"}

Also can something be added to the README about using ajax vs non-ajax multi selects.

Otherwise, it's working great!

angular-ui.github.com

Pretty slow, blocking on jsfiddle, I think we should consider making it more of an informational page without the running app for now.

create test for remove directive

Remove needs to be refactored to leverage a comment placeholder. Instead of tracking the index and using elm.data().

Consider integration of angular-contrib repo

https://github.com/twarogowski/angular-contrib

Changes to Prettify filter

So I actually thought this was for the Prettifier javascript lib. I think we should rename it to prevent confusion.

In CakePHP, there is a lib called "Inflector" that contains methods such as Inflector.underscore(), Inflector.variable() and Inflector.humanize().

I think we should rename the filter to either humanize if that's the only thing it will do, OR go the CakePHP route and name it inflector with the intention of supporting more/future inflections as options. It could of course humanize by default.

So it would be like: {{ item.columnName | inflector:'humanize' }}

Pinging @BlackBarn for his thoughts and @petebacondarwin since he merged this in.

@BlackBarn, if you agree perhaps you might be willing to make this change?

how to set datepicker date format?

how to set datepicker date format?

create test for reset directive

Make file broken?

I'm hoping it's not just me though. I cannot seem to make a new build. I'm going to push a new directive in (I am substituting chosen for select2) but I can't generate a new build.

Pete: do you mind taking a look at it?

Open Modal with data-toggle="modal" broken

Doesn't do anything for some reason on the demo page. Not sure why.

Problems with grunt and testacular

Having issues. Testacular is not seeing updates.

I did have problems doing npm install -g testacular ( see bottom, but even so it is running and I had already installed)

I did grunt server, loaded up http://localhost:8080 in browsers

grunt does not seem to know about testacular

Running "watch" task
Waiting...^Cbash-3.2$ grunt watch
path.existsSync is now called fs.existsSync.
Running "watch" task
Waiting...OK

File "modules/directives/currency/test/currencySpec.js" changed.

Running "coffee:build" (coffee) task

Running "concat:basic" (concat) task
File "build/angular-ui.js" created.

Running "test" task
Make sure the testacular server is online: run grunt server.
Also make sure you have a browser open to http://localhost:8080/.
Use --force to continue.

Running "watch" task

Waiting..

sudo npm install -g testacular

npm ERR! TypeError: options.uid should be a number
npm ERR! at ChildProcess.spawn (child_process.js:777:24)
npm ERR! at Object.exports.spawn (child_process.js:614:9)
npm ERR! at spawn (/opt/local/lib/node_modules/npm/lib/utils/exec.js:103:22)
npm ERR! at exec (/opt/local/lib/node_modules/npm/lib/utils/exec.js:40:12)
npm ERR! at /opt/local/lib/node_modules/npm/lib/utils/lifecycle.js:146:5
npm ERR! at process.startup.processNextTick.process._tickCallback (node.js:244:9)
npm ERR! You may report this log at:
npm ERR! http://github.com/isaacs/npm/issues
npm ERR! or email it to:
npm ERR! [email protected]
npm ERR!
npm ERR! System Darwin 10.8.0
npm ERR! command "node" "/opt/local/bin/npm" "install" "-g" "testacular"
npm ERR! cwd /Applications/MAMP/htdocs/angular-ui
npm ERR! node -v v0.8.2
npm ERR! npm -v 1.1.16
npm ERR! message options.uid should be a number
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Applications/MAMP/htdocs/angular-ui/npm-debug.log

ui-config requires user to use all modules not just 'ui.directives' or 'ui.filters'

When I created unit test for updated uiCurrency, i realized that I had to inject 'ui' instead of just 'ui.directives' in order for it to work.

Using below, my test now work but am not sure if this is good solution.

angular.module('ui.filters', []).value('ui.config', {});
angular.module('ui.directives', []).value('ui.config', {});
angular.module('ui', [
'ui.filters',
'ui.directives'
]).value('ui.config', {});

angular module namespacing problem

This is a pretty major problem (and came at a loss of whatever hair i have left) with an easy, albeit annoying
solution. The problem is that the angular module namespacing is not behaving as one would hope.

The module.FOOBAR namespacing is not additive. So if you, create a directive

angular.module('ui.directives').directive('uiFoo', [], function() {})

and then create

angular.module('ui.directives').directive('uiBar', [], function() {})

Then you will only have one directive 'uiBar', 'uiFoo' is lost to the bitbucket

I'm going to put in a feature request on angular.js site. In the meantime, there are a couple of alternatives
(and probably more).

1. Individually namespaced directives and then aggregated in ui.directives
   angular.module('ui.directives.uiFoo').directive('uiFoo', [], function() {})
   angular.module('ui.directives.uiBar').directive('uiBar', [], function() {})
   angular.module('ui.directives',['uiFoo', 'uiBar'])

   this kinda fits the slicing and dicing, we are proposing, however, I think we'll need to generate the module.js file.

2. Clump all the files together into one file under a 'ui.directives' module, this flies in face of the slicing and dicing.

I believe this problem is in both current and 1.0.0 versions of angular.

Select2 - Upgrading to v3

Hey,

The latest HEAD of select2 (v3?) supports optgroups and seems to work fine with angular-ui.

Cheers

Cleanup Select2 using demo project

So I found someone was using what I think may have originally been our code in their project: http://www.sekas.de/ptr/ptr-0.2.1/src/html/ptr.html#!/monthGrid?year=2010&month=2

If you view the monthDirectives.js file you will find it. It seems to properly use the form controller which I plan to get around to as soon as I have an opportunity something in the next millenium.

Create Unit Test Template in Readme

Commented

ng-model not updating with select2 using ajax

I'm honestly not sure if this is a bug or just something I'm not doing correctly, but using select2 with ajax options I'm having trouble getting the model to update.

Here is a demo, in this demo the $watch function is not called upon making a selection.....
http://plunker.no.de/edit/dEhd2M

It would appear that the change event is never bound here....
https://github.com/angular-ui/angular-ui/blob/master/build/angular-ui.js#L345

It only binds if the element is not a select element and the multiple attribute is defined. I may be missing something in my configuration, but I understand from the select2 docs from my old friend Igor that it is correct to not use a select element for the ajax lookup use case.

Validation Suite

Coming from the tail-end of this discussion: https://groups.google.com/forum/?fromgroups#!topic/angular-ui/OCKRx3n-kpI
Example http://jsfiddle.net/xPSzE/1/ (coupled with a datepicker)

It would be nice if we could provide a set of commonly-used validation rules, or perhaps make the work involved with adding new rules easier (possibly?).

I think validation should be decoupled from visual widgets (such as a date validation from a datepicker) so that you are not forced to pass configuration options every time you call ui-date.

Thoughts?

ui-date, invalid isolate scope definition for directive uiDate

Hi,
I've tried to use ui-date directive (from the example) and what I have got is such error:

Error: Invalid isolate scope definition for directive uiDate:
("","uiDate")@http://127.0.0.1:8000/media/app2/lib/angular/angular.js:4178
forEach([object Object],(function (definiton, scopeName) {"use strict";var match = definiton.match(LOCAL_REGEXP) || [],

One way to solve this error is to remove scope from ui-date directive.

Release new version?

We've just added codemirror directive and a few other things. Let's update the package.json version name (decide on an initial version, maybe 1.0.1), run grunt, and commit the new build files?

Client-Side build script

This would essentially be the 'package builder' I keep mentioning.

Found some interesting reading material: http://addyosmani.com/blog/client-side-build-process/

Makefile isn't executing css minification

At least for me. Is this occurring for anyone else?

adding new tests to test.config

I created some new tests for typeahead and carousel (I'll be putting these up on weekend).
The problem is that putting new tests after dateSpec.js causes tests to break. Putting new tests before
everything works fine and dandy. I'm a little suspicious of coffeescript in that it appears to put extra
'return' statements for the last 'it' block of each describe and the last 'describe' block.
One thing I may try is translating to regular js and removing the coffeescript to see how that works.

'modules/directives/typeahead/src/.js',
'modules/directives/typeahead/test/.js',
'modules/directives/carousel/src/.js',
'modules/directives/carousel/test/.js',
// interesting but definitely not funny, the below lines put above other directive specs causes failures
'modules/directives/date/src/.js',
'modules/directives/date/test/.js',

Tooltip position not following page scroll

Hi!

Discovered a problem with the Tooltip implementation on the Demo page, it's displayed with the wrong y position when the page is scrolled.

Events bug from #16

Continuing tracking the fix for bug / pull request #16

I'll take a look at this as soon as I can.

Summary:

Even with this correction, there's still a problem. Using a uiEvent gives the following message:

Uncaught TypeError: Object # has no method 'apply'

This happens on your example on the angular-ui home page as well.

Consider integration of jquery mobile angular adapter features

https://github.com/tigbro/jquery-mobile-angular-adapter/tree/master/src/main/webapp/jqmng

the if-directive and a few others might be viable solutions. The if-directive seems roughly equivalent to the remove directive.

Testing: Watching files or forcing 'jake'?

So on the testing, there are two possible approaches to building the test/test-config.js file:

1. We can make the testacular server watch source files for changes and re-test on each change.
2. We can make the testacular server watch the compiled build files for changes and re-test on each change.

Isn't it easier to make it watch the source files for changes, instead of having people re-run jake each time they want to test again?

The version of test-config currently on master forces people to re-build with jake to test. We should settle on one approach though, I think we've switched between these two approaches three or four times now.

LICENSE file is missing

What is the license of this project?

ui-keypress requires ng-model-instant to update model

This will not be self-evident that ng-model-instant is needed. Probably want something like in ui-date that does $setViewValue

Add a ui-for directive for associating form labels with inputs

I don't want to have to ID every single <input> I use just so that my <label> can be properly attached. The need for an ID is also further rendered useless with the use of ng-model (which is essentially an identifier for the input). The idea would be that you could simply do and the label would automatically be attached to the (nearest/first?) input that uses that model.

Issues:

• What if there are multiple inputs with the same ng-model? (probably should just use the first match or nearest match)
• Is it acceptable to search the nearby DOM from within a directive (this is not normally done)
• What if multiple inputs on the page use the same model, but represent different references (such as within ng-repeat)

Features:

• Leverage existing IDs on the input if one is already present

Add --bare to coffeescript compile?

I was wondering if we should add the --bare parameter to the coffeescript compiler. There should not be bleeding of variable declarations and it is inconsistent to have closures around some modules but not others. It would perhaps make more sense to wrap the entire angular file in a closure (if this is really necessary) but perhaps this can be done by the minification tool if it's really a concern.

Unit tests not seeming to work

@petebacondarwin I pulled down latest, saw the new jake stuff. I tried running tests, no errors but then no tests ran either.

debug: Execution (fired by autoWatch)
debug: All browsers are ready, executing
debug (web server): serving: /opt/local/lib/node_modules/testacular/static/context.html

Chrome 19.0: Executed 0 of 0 SUCCESS (0.073 / 0 secs)

CodeMirror demo

There is no demo of the CodeMirror directive on the site. Should probably add one.

Directives & Issues have their own modules

Pete: I just noticed this. Why does every single directive and filter need it's own module?

This feels really anti-intuitive to me, and the solution we had before felt way more elegant. Is this just so that tests could work? In which case, I feel like perhaps we should make tests cater to the code, rather than the code cater to the tests.

I don't really want to get into debugging issues caused by creating a plethora of module namespaces, etc, and if we're hoping people emulate our approach it seems to set a poor standard.

Conflict between Select2 and TinyMCE on the same page

When I test both standalone they behave perfectly fine, however on the demo page there appears to be a conflict.

This may not necessarily be the fault of angular, and I somehow doubt TinyMCE would honestly be the culprit, but I have had both running on the same page before and this did not happen so I would like to look into it and see if I can at least return some feedback to the respective sources.

Hopefully this doesn't break anything else on the demo page.

This appears to only happen with the AngularUI directives, so more reason for us to look into it: http://jsfiddle.net/9tM5Z/ (non-angular demo works fine)

Event not passed to the Keypress directive

hi!

First of all, thnx for all the work on the angular-ui!

It looks like the original event is not passed into the Keypress directive so it is impossible to call e.preventDefault(). The problem is visible on the angular-ui [demo page(http://angular-ui.github.com/#directives-keypress) where pressing Enter moves to a new line in a text editor. Can prepare a jsFiddle with an example if needed to reproduce.

From what I can see the pb was introduced in the c15c6fd (with a major refactoring).

Cheers,
Pawel

Add npm dependencies for Jake & Testacular?

I was just thinking, why not add jake and testacular to the npm dependencies? I mean we're already using npm for building anyway, might as well just use it for all of angular-ui's dependencies anyways. I realize some/most/all might be expected to have some of these tools installed globally, however I don't really see a big reason to have someone enter:

npm install
sudo npm install -g testacular
sudo npm install -g jake

When you can just do npm install

Code review of uiCurrency

Finally finding time to start contributing, please take a look at module. Until we get squared away with our approach
to 1.0 production version, I did a bit of shenanigans so I didn't have to fix existing code. If its ok, i'll do a pull request.
I need to do a bit more on readme.

https://github.com/dandoyon/angular-ui/tree/d1853c59ead94038e67f5ebfedc80be8e4178604/modules/directives/currency

Any comments, suggestions are appreciated

--dan

Change ui-event to evaluate expressions

ui-event is kind of weird at the moment. It can't evaluate expressions, only call functions.

I think it would be much more useful if we made it evaluate angular expressions each time.

<input ui-event="{'keyup': 'count = count + 1', 'click': 'count = count - 1'}">

//in the link function
events = scope.$eval(attrs.uiEvent);
for (key in events) {
  if (events.hasOwnProperty(key)) { 
    elm.bind(key, function() {
      scope.$apply(events[key]);
    });
  }
}

Create dependencies.json for each module

Lets go ahead and put these together in each directive. We can use the following format for now. We should also agree on a jquery version to depend on for the project as a whole, but we can probably do this by looking at the minimum jquery version allowed by all directives collectively.

Also, I believe that external sources should not support local paths.

dependencies.json:

{
    "common": ["jquery", "jquery-ui", "bootstrap"],
    "internal": ["directives/date", "filters/length"],
    "external": {
        "Select2": ["http://full/path/to/select2.css", "http://full/path/to/js/select2.js"]
    }
}

IE Shiv

I stubbed out an IE shiv page that I think would be very crucial for most people.

Read the notes here: http://docs-next.angularjs.org/guide/ie

It would be better if the shiv was packaged to its own file. That way instead of doing a programmatic check for IE version, people can simply wrap the script include in a set of conditional comments.

Fix the unique filter

The unique filter is currently broken and needs to be fixed. On top of this it doesn't have unit tests so those should be added as well.

Simplify the README

Most modern web frameworks and tools are going the super minimalist approach of having 3 big sentences, 2 lines of terminal, and a shiny huge button for you to click and that's about it.

We could probably reduce the word-count of the readme fairly easily (especially considering the upcoming changes to jake).

The main thing however is that we need to put our coding standards on the page (so people don't commit their built files anymore). Perhaps now would be the time to decide if we break up the README into a github wiki or use the github pages repo?

Changing options in controller doesn't update view

If you need to change the dateOptions later on based on say a ng-change event from a select it doesn't update the views date picker with the new options. I have a condition that depending on what select option you chose it restricts what days are available to select in the date picker. If I have the restriction in the beginning it works. applying it later within the controllers change handler doesn't work..

My basic controller code:

$scope.startDateOptions = {minDate: 0};

$scope.unavailableDates = [
        "2012/01/29","2012/01/30","2012/01/31",
        "2012/02/29","2012/02/29",
        "2012/03/29","2012/03/30","2012/03/31",
        "2012/04/29","2012/04/30",
        "2012/05/29","2012/05/30","2012/05/31",
        "2012/06/29","2012/06/30",
        "2012/07/29","2012/07/30","2012/07/31",
        "2012/08/29","2012/08/30","2012/08/31",
        "2012/09/29","2012/09/30",
        "2012/10/29","2012/10/30","2012/10/31",
        "2012/11/29","2012/11/30",
        "2012/12/29","2012/12/30","2012/12/31"
    ]; // yyyy/MM/dd

    $scope.unavailableDays = ["Saturday","Sunday"];

    $scope.unavailable = function(date) {
        $scope.ymd = date.getFullYear() + "/" + ("0"+(date.getMonth()+1)).slice(-2) + "/" + ("0"+date.getDate()).slice(-2);
        $scope.day = new Date($scope.ymd).getDay();
        if ($.inArray($scope.ymd, $scope.unavailableDates) < 0 && $.inArray($scope.days[$scope.day], $scope.unavailableDays) < 0) {
            return [true, "enabled"];
        } else {
            return [false,"disabled"];
        }
    }

$scope.selectedFrequencyChanged = function() {
        $scope.showDayOfWeek = angular.equals($scope.selectedFrequency.value, "weekly");

        $scope.startDateOptions = {minDate: 0, beforeShowDay:$scope.unavailable};
    }

Here is the select dispatching the change event:

<select id="input_frequency" ng-model="selectedFrequency" ng-options="f.frequency for f in frequencies" ng-change="selectedFrequencyChanged()" class="span2"></select>

Here is the input I'm using within the view:

<input ui-date="startDateOptions" id="startdate" type="text" ng-model="service.startdate" value="{{service.startdate}}" class="span3">

Am I just missing something?

Bootstrap ui stuff

How should I move some bootstrap ui stuff I've written ( https://github.com/ajoslin/angular-bootstrap-ui ) into angular-ui? A lot of the directives will have a dependency of a certain bootstrap JS script (eg modalDirective.coffee depends on bootstrap-modal.js, written by twitter guys). How would I set up these dependencies?

most excellent refactoring of modal

@ajoslin Andy, much much better. I'm going to try and work it into code at work. How'd you come up with the $$phase bit? One comment I might make is to do something like below. I think it follows better practices wrapping function in $apply.

      if (!scope.$$phase) {
        scope.$apply(function() {
            model.$setViewValue(false);
        });
      }