0

I have a button that shows a dropdown on click. Each element of the dropdown spawns a ui dialog when clicked. When the ui is opened, the corresponding item in the dropdown is checked. Clicking the element in the dropdown again will close the dialog, and uncheck it in the list.

The dialog can also be closed with an 'X' button on the dialog. I need this closing action to also uncheck the corresponding element in the dropdown. This is what I have inside of a controller:

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" style="width:100px">
      <img src="/UIDemo/images/maps-icon.png" style="padding-right:3px" />
       Data Grid 
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" ng-click="showRouteFeature = !showRouteFeature; 
            openCloseGrid('routeFeature', showRouteFeature);">
          <span ng-class=
            "{'glyphicon glyphicon-ok icon-ok check-mark': showRouteFeature, 
              'glyphicon no-icon': !showRouteFeature}">
          </span>
          <span class="text">Route Feature</span></a></li>
    </ul>
</div>

And in my .js file I have an on close event: 

$(document).on('click', '.ui-dialog-titlebar-close', function () {
    $scope.showRouteFeature = false;
    $scope.apply();
 });

The formatting is a little sketchy but I did what I could. When I click an option in the drop down it sets a toggle (established by ng-click" on showRouteFeature from true to false and vice versa. When I click the 'X' on the dialog, it sets $scope.showRouteFeature to false, which should uncheck the element in the dropdown. I can see in the console that $scope.showRouteFeature is in fact set to false when I click the 'X'.

I've found this question, How can I tell AngularJS to "refresh", and this post, http://jimhoskins.com/2012/12/17/angularjs-and-apply.html, on the issue, which is why I have $scope.apply() after I set the variable to false. However, it's just not refreshing my dropdown. Any insight would be appreciated.

Community
  • 1
  • 1
jmcox
  • 86
  • 1
  • 7

1 Answers1

0

This might not be your problem, but I have a suspicion it might, so here goes:

A word of warning, when using primitives directly on the scope as in your example, you better know very well what you are doing. In general it should be avoided. Reason is that if a child scope is created, the prototypal inheritance will make the property on the child scope not be reflected on the parent scope. Many built-in Angular directives create child scopes (ng-repeat, ng-if, ng-switch comes to mind). You don't show a ng-repeat in your code, but if it's supposed to work as you explain I suspect you have it in your actual code. So place the property into an object.

A nice way to figure out if this is your issue, place {{showRouteFeature}} at the topmost level of the HTML, then place it on several levels deeper into your DOM. If they start to differ in value, you have a scope inheritance problem.

See first point here for more info: http://blog.technovert.com/2014/02/common-pitfalls-angularjs/

SveinT
  • 703
  • 5
  • 10