the event on 'sm-dropdown' triggered twice.

[liekkas]

in view:

<sm-dropdown class="selection" model="test.model1" items="test.genders" label="item.label"
                 value="item.value" default-text="'Gender'"
            on-change="test.onChange()" on-show="test.onShow()"></sm-dropdown>

in ctrl:

    vm.model1 = null;
    vm.genders = [
        {label: 'Male', value: 'M'},
        {label: 'Female', value: 'F'}
    ];

    vm.onChange = function () {
        console.log(">>> onChange:" + vm.model1);
    };

    vm.onShow = function () {
        console.log(">>> onShow:");
    };

open the html,first time,the console prints log 3 times :

>>> onChange:null
>>> onShow:
>>> onChange:null
>>> onShow:
>>> onChange:null
>>> onShow:

if I chose one,the console prints log 2 times:

>>> onChange:M
>>> onShow:
>>> onChange:M
>>> onShow:

it seems the event were trigged twice，how to fix it? thank u very much.

[ClickerMonkey]

The on-change & on-show attributes are binded with '=' as opposed to '&' so supplying a function expression is not correct.

You will need to modify your code like so:

on-change="test.onChange" on-show="test.onShow"

(notice I removed the ())

The reason this is done is because Angular can only pass certain types of variables to functions, and Semantic UI has callbacks which return "invalid" types in their callbacks. This will be changed in the future to operate as you expected.

For more information:

http://clickermonkey.github.io/SemanticUI-Angular/src/dropdown/directives.html

[liekkas]

it works,thank u.