write directive in 1.0 : example with jQuery UI autocomplete

[sebmade]

Hi,

Just to share with you my last experiment to integrate jQuery UI autocomplete component with latest version of angular.js.

And want to say that is so very to use and really fun ! congratulations again to the team for this great framework.

http://jsfiddle.net/sebmade/CHVbb/276/

Waiting for the rewrite of Łukasz Twarogowski project ;)

https://github.com/twarogowski/Tasks

[Vojta Jína]

Nice !

Does the jq plugin removes previously created autocomplete ? (e.g. if
you change the source list, you do elm.autocomplete({..});)

If you want to allow binding to complex expressions (e.g.
selection="some.obj.prop"), you can use $parse:
http://jsfiddle.net/CHVbb/281/

Or in your case, if you are replacing the element, you can create
isolate scope + accessor, then angular will do this parsing for you...

V.

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/angular/-/USI8K9G3yvcJ.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/angular?hl=en.

[Vitaly]

I have a question, if put alert() like this

myApp.directive('autocomplete', function($parse) {
    return function(scope, element, attrs) {
        alert('start');
        var setSelection = $parse(attrs.selection).assign;

so when alert fires up it can be seen the curly braces {{obj.name}}

Is it normal functioning for Angular?

This question aroused because if build big table of bindings with ng-repeat there is a flickering affect, displaying table with {{data}} (especially in Opera)

Vitaly

26 марта 2012 г. 8:04 пользователь Vojta Jína <vojta...@gmail.com> написал:

[Vojta Jína]

Hi Vitaly,

this is because alert is fired before angular compiles the dom (before
it replaces the double curlies with real values).

Check out ng-cloak
http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive.ng-cloak
Or you can use ng-bind-template instead of double curlies...

V.

[Vitaly]

In table with ng-repeat, ng-bind-template displays only the last row, what is wrong with the code?

<div ng:app>

            <div ng-controller="Ctrl">

                Salutation: <input type="text" ng-model="salutation" ng-model-instant><br>

                Name: <input type="text" ng-model="name" ng-model-instant><br>

                <table>

                    <tbody>

                        <tr ng:repeat="key in count">

                            <td><span ng-bind-template="{{key}}: {{salutation}} {{name}}!"></span></td>

                        </tr>

                    </tbody>

                </table>

            </div>     

        </div>

function Ctrl($scope) {

    $scope.salutation = 'Hello';

    $scope.name = 'World';

    $scope.count = ['1', '2', '3'];

}

26 марта 2012 г. 10:54 пользователь Vojta Jína <vojta...@gmail.com> написал:

[Vojta Jína]

Please create a jsfiddle, you can start from here:
http://jsfiddle.net/vojtajina/una6x/

V.

[Vitaly]

Have a look 

http://jsfiddle.net/una6x/22/

26 марта 2012 г. 11:54 пользователь Vojta Jína <vojta...@gmail.com> написал:

[Vitaly]

http://jsfiddle.net/una6x/24/ 

26 марта 2012 г. 12:12 пользователь Vitaly <chernov...@gmail.com> написал:

[Peter Bacon Darwin]

The elements are in the DOM but are given 0px width for some reason...

[Peter Bacon Darwin]

0px height, I meant

[Peter Bacon Darwin]

It appears to be a problem with the ng-bind-template directive.  If you put the binding in with curly braces it works: http://jsfiddle.net/una6x/26/
Pete

[Łukasz Twarogowski]

I plan to start porting my old project this week.

there is a initiative to bundle all angular widget related efforts here:  https://github.com/angular-ui/angular-ui 

regards,

Łukasz

[Vitaly]

That would be very supportive initiative since a lot of good snippets are scattered around

26 марта 2012 г. 13:11 пользователь Łukasz Twarogowski <twaro...@gmail.com> написал:

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/B8p8shWWug8J.

[Vojta Jína]

This looks like a bug in ng-repeat/ng-bind-template, I will look into
it tomorrow.

V.

On Mon, Mar 26, 2012 at 1:23 AM, Peter Bacon Darwin

[Vojta Jína]

Hey guys, just FYI, this issue has already been fixed - in rc3:

http://jsfiddle.net/vojtajina/una6x/29/

V.

[ksenia.m...@gmail.com]

Great example, thanks!

I have a question though.

I noticed some strange behavior. If not placing <automplete/> tag inside <div> then the following markup won't work

<div ng-controller="MyCtrl">

        {{name}}

        <autocomplete list="availableTags" selection="name"/>

        <span>{{name}}</span>

    </div>

The provided markup will substitute the first {{name}} with selected value, but not the second one! 

Placing <automoplete/> inside <div> solves the problem.

Could you, please, explain this magic to me? 

I suspect this is something about scope, but being new to angular I can't figure ot out :(

Thanks!

Ksenia

[Evan Wieland]

Thank you very much for this! It was a huge help for me :)