switch-change="onChange()" gets called immediately when loading

[pradt]

Hi, I was looking to wire up this directive to call a web service api whenever there was a change in the value. I saw that there is a function that I can place on the switch-change attribute, however, I noticed that this is getting called on first render (when the page loads) as opposed to when the user has interacted with the switch.

I tested this using :
//model:

$scope.model = {
available : false
}

//onChange Function

$scope.onChange = function()
{
console.log("onChange triggered...");
//I was expecting to call the web-service within this method. 
}

My element :

<input
    bs-switch
    ng-model="model.available"
    type="checkbox"
    switch-active="{{ isActive }}"
    switch-readonly="{{ isReadonly }}"
    switch-size="{{ size }}"
    switch-animate="{{ animate }}"
    switch-label="{{ label }}"
    switch-icon="{{ icon }}"
    switch-on-text="{{ onLabel }}"
    switch-off-text="{{ offLabel }}"
    switch-on-color="{{ on }}"
    switch-off-color="{{ off }}"
    switch-radio-off="{{ radioOff }}"
    switch-label-width="{{ labelWidth }}"
    switch-handle-width="{{ handleWidth }}"
    switch-inverse="{{ inverse }}"
    switch-change="onChange()"
    ng-true-value="'yep'"
    ng-false-value="'nope'">

[pradt]

I tried to debug this and noticed that the switchChange() is being called upon a model change. I'm wondering why this would need to call the switchChange function if a model is changed ?

          controller.$render = function () {
            initMaybe();
            var newValue = controller.$modelValue;
            if (newValue !== undefined && newValue !== null) {
              element.bootstrapSwitch('state', newValue === getTrueValue(), true);
            } else {
              element.bootstrapSwitch('indeterminate', true, true);
              controller.$setViewValue(undefined);
            }
            switchChange();
          };

[frapontillo]

What do you mean? switch-change is called every time the model changes. If you want to listen to view changes, please use ng-change.

[pradt]

ok I'll try that, what's switch-change for ?

[frapontillo]

It's for model changes.

[millenjo]

The problem is most likely that the ng-model value is evaluated as undefined when the template is rendered and when the controller sets available to false the directive interprets it as a model change, which it strictly speaking is even though one might argue that a ng-model change from undefined->true/false should not trigger a model change since it's almost always just an init case.

The problem can be solved by adding an ng if like this

ng-if="model.available !== undefined"

to the bs-switch input or a wrapping element, ng-show will not work since that wont stop the template from rendering the input element.

[Firzenizer]

I also ran into this and I find it unexpected behaviour. In my app an undefined settings item gets initialized and this is triggering switch-change. Using ng-change now. It works as I wanted it to work.

[frapontillo]

Please re-open if you still have this issue.