ClickerMonkey / SemanticUI-Angular

Angular Directives for Semantic UI
http://clickermonkey.github.io/SemanticUI-Angular/examples/
MIT License
56 stars 28 forks source link

sm-dropdown doesn't appear to update on model change #7

Closed jimschubert closed 8 years ago

jimschubert commented 8 years ago

I've only looked at this briefly, and I was hoping it's just something I'm overlooking. Any data that is queried asynchronously doesn't seem to update the selected item in a dropdown until the next digest loop.

Here's some code to add to src/dropdown/examples.html:

    <div data-copy-to="#example8">
      <sm-dropdown class="example8 selection" model="model8" items="facilities" label="item.Name" default-text="'Facilities'"></sm-dropdown>
      <sm-button sm-dropdown-clear="'.example8'">Clear</sm-button>
      <textarea rows="4" style="display:block;">{{model8|json}}</textarea>
    </div>

    <pre class="ui segment prettyprint lang-html" id="example8"></pre>

This code does not result in a selected item defined by model8 as I would expect:

      $scope.model8 = null;
      $scope.facilities = [];

      // pretend this is an $http.get or something.
      setTimeout(function(){
        $scope.$apply(function(){
        $scope.facilities = [
          { Name: "First", Id: 0},
          { Name: "Second", Id: 1},
          { Name: "Third", Id: 2}
        ];
        $scope.model8 = $scope.facilities[1];
        });
      }, 500);

This code works because model8 is applied in a separate digest.

      $scope.facilities = [
        { Name: "First", Id: 0},
        { Name: "Second", Id: 1},
        { Name: "Third", Id: 2}
      ];

      setTimeout(function(){
        $scope.$apply(function(){
        $scope.model8 = $scope.facilities[1];
        });
      }, 500);

This seems counter-intuitive. A good use case for this would be a country dropdown where countries are retrieved from an API and on success, the current user's country is selected from the array.

I'm thinking there's a $scope.$eval that's missing in sm-dropdown when applying the model, but I don't see it since applyValues is being called:

  1. On element.ready
  2. On model change
  3. On items change

And these seem to conflict with the modelWatcher's intentions of set/update on the model (where $scope.$eval does exist and allows core to ignore updates on the model once for the digest).

Any pointers or suggestions?

ClickerMonkey commented 8 years ago

Thanks for submitting the issue, looking into it!

ClickerMonkey commented 8 years ago

PR merged, sorry for the delay