Trigger ngChange on Custom Directive

[Mahbub]

Hi,

I was wondering how to implement a dropdown directive which will have the ngChange event like a normal select has. 

This is what i have so far http://jsfiddle.net/mahbub/GfCTU/19/ . I know ngChange requires ngModel controller but how do i trigger the onChange on that dropdown when value changes. 

Any help is greatly appreciated. 

Thanks

[Pawel Kozlowski]

Hi!

Ng-change is not the right path here as this directive is meant to be
used for reacting on _model_ changes as you've rightly observed.
You should be registering general DOM event handlers in a directive.

If you are looking for the inspiration regarding bootstrap drop-down
directives I would suggest having a look at the "Dropdown Toggle"
directive from the
http://angular-ui.github.com/bootstrap/
Sources here: https://github.com/angular-ui/bootstrap/blob/master/src/dropdownToggle/dropdownToggle.js

The idea here is that you extract to the directive common parts
(rendering a dropdown, toggling its visibility etc.) while still
allowing people to specify content of their drop down. This way people
can simply bind click events to the content at will.

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
>
>



--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[Mahbub]

Thanks Pawel for your reply. I needed a generic listener for a number of controls on the change event so that i can check the object equality and save data when that happens. I guess I'll change the plan a bit.

[Stéphane Vasseur]

I'd be interested to know if you found a workaround because I was looking for a way to trigger the ngChange event too.

Thanks

[Nick Barton]

This reply might be a bit random but I hope this helps. Something like this in a directive 

var num = 0; // compute this value somehow

var evalStr = attrs.ngModel + '=' + num.toString();

// update the bound scope variable and if exists call the change function

if (typeof attrs.ngChange != 'undefined')

{

    evalStr += ';'+attrs.ngChange;

}

scope.$apply(evalStr);

Hope this helps

[Lucas Antoine]

This solution doesn't work for me.

[Thomas Chille]

This works for me:

.directive('mySelect', [  

  '$timeout'

  ($timeout) ->

    restrict: 'E'

    templateUrl: '/shared/select.html'

    replace: yes

    scope:

      ngModel: '='

      ngChange: '&'

      nameProp: '='

      options: '='

    link: (scope, element, attrs) ->

      scope.$watch 'ngModel', ->

        scope.selected = scope.ngModel?[scope.nameProp]

      scope.select = (option) ->

        scope.ngModel = option

        $timeout ->

          $scope.ngChange()

])

[Nozel Rosario]

Thanks, this worked for me :)