Check if ng-options changed in custom directive

[Pascal Precht]

Hey guys,

I have a directive which is restricted as an attribute on select elements. Since the directive does some DOM manipulation on the select's options, it has to trigger a specific task everytime the options one the select change.

Is there any way to check within  a directive's link function, if the options of the select has been changed?

Sth. like

scope.$watch(checkIfoptionsChanged, function (value) {

    doSomethingWith(value);

});

Couldn't find anything in the web..

[Clemens Capitain]

Maybe you could use ng-click on every option element to kickoff a specific task?

Like

<option ng-click="doSomething()">execute task 1</option>

[Pascal Precht]

Ah no. The point is, the select's options get updated through two-way-data binding. 

<select ng-options="value.id as value.label for (key,value) in someOptions" ng-model="someValue"></select>

Where 'someOptions' gets updated through controllor. This again, updates the options because of two-way-data binding and the directive has then to make a task.

--
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/S-a_SLp3MyM/unsubscribe?hl=en-US.
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?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

/pp

[Mike McElroy]

And you're using ng-options?  I'd say try to parse the attr.ngOptions to get the collection ngOptions is watching and register your own $watch on it.

So...

<select ng-options="foo in collectionOfFoo" myDirective></select>

.directive("myDirective", function() {

  return function(scope, element, attr) {

    // parse ngOptions just like ngOptions would

    var scopeCollection = parse(attr.ngOption);

    scope.$watch(scopeCollection, function(newVal) {

      //foo

    });

  };

});

[Pascal Precht]

My current solution is to pass another attribute which gets the name of the scope property that represents the options, as value.

Since the directive isn't isolated and also doesn't create a child scope, I can do something like

link: function (scope, element, attrs) {

    scope.$watch(attrs['options‘], function (value) {

        if (value) {

           // do something

        }

    });

}

and in html

<select 

  ng-options="value.id as value.label for (key,value) in someOptions" 

  ng-model="someValue"

  options="someOptions"

  ></select>

Now this actually works, but it feels a bit redundant.

On Friday, June 7, 2013 10:39:23 AM UTC+2, Pascal Precht wrote:

Ah no. The point is, the select's options get updated through two-way-data binding. 

<select ng-options="value.id as value.label for (key,value) in someOptions" ng-model="someValue"></select>

Where 'someOptions' gets updated through controllor. This again, updates the options because of two-way-data binding and the directive has then to make a task.

On Fri, Jun 7, 2013 at 10:36 AM, Clemens Capitain <ckcap...@gmail.com> wrote:

Maybe you could use ng-click on every option element to kickoff a specific task?

Like

<option ng-click="doSomething()">execute task 1</option>

Am Freitag, 7. Juni 2013 10:26:39 UTC+2 schrieb Pascal Precht:

Hey guys,

I have a directive which is restricted as an attribute on select elements. Since the directive does some DOM manipulation on the select's options, it has to trigger a specific task everytime the options one the select change.

Is there any way to check within  a directive's link function, if the options of the select has been changed?

Sth. like

scope.$watch(checkIfoptionsChanged, function (value) {

    doSomethingWith(value);

});

Couldn't find anything in the web..

--
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/S-a_SLp3MyM/unsubscribe?hl=en-US.

To unsubscribe from this group and all its topics, send an email to angular+unsubscribe@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

/pp

[Pascal Precht]

Ah! perfect! Thanks man! :)

[Julien Bouquillon]

In my angular-carousel is simply parse the ngRepeat expression in the compile phase and it works quite well :)

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?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

/pp

[Pascal Precht]

Am I missing something? Getting the following error when trying to parse ngOptions

Syntax Error: Token 'as' is an unexpected token

On Friday, June 7, 2013 10:40:36 AM UTC+2, Mike McElroy wrote:

[Julien Bouquillon]

Yes you need to parse manually and extract only the relevant part. tricky but didnt find another way

https://github.com/revolunet/angular-carousel/blob/master/src/angular-carousel.js#L33-L34

[Pascal Precht]

Okay, so I have to go with something like this one https://github.com/angular/angular.js/blob/master/src/ng/directive/select.js#L302

[ProLoser]

This is how I did it: https://github.com/angular-ui/ui-select2/blob/7cb0465877cceb0d1483298a16c707514cb95eb4/src/select2.js#L28

On Friday, June 7, 2013 1:26:39 AM UTC-7, Pascal Precht wrote: