Updating dom from javascript within angularjs

Question

I am changing the class of a button, of a button group, using javascript within angular directive.

My update is happening correctly. But the change is not reflecting on screen until i click somewhere in the page.

angular.module('test', []).
directive('selected', function() {
  return {
    link: selectedLinker,
    restrict: 'A',
    replace: false
  }

  function selectedLinker(scope, element, attribute) {
    var groupname = attribute.selected;
    groupname = 'groupname';
    element.bind('click', function() {
      var elements = document.querySelectorAll('[selected=' + groupname + ']');
      for(var i=0; i<elements.length; i++) {
        var item = elements[i];
        item.classList.remove('selected');
      }
      this.classList.add('selected');
      //element.addClass('selected');
    })
  }
});

What am I missing here. I dont want to use jquery. Thanks.

Pluker Link

nothing to do with angular ... has to do with bootstrap :focus css selector. Inspect element in browser dev tools and look at css rules that apply ... will see the :focus selector as part of same rule for .selected — charlietfl
– charlietfl, Commented May 15, 2016 at 4:27

Pawan B · Accepted Answer · 2016-05-15 04:42:07Z

1

try adding this to your css :

.btn:focus {
      background-color: inherit !important;
      color: inherit !important;
    }

answered May 15, 2016 at 4:42

Pawan B

4,6332 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

10BitDev · Accepted Answer · 2016-05-15 04:46:07Z

1

Add this.blur() after this.classList.add('selected'); in your directive's link function to clear the bootstrap CSS properties being applied due to the button being in focus.

answered May 15, 2016 at 4:46

10BitDev

2101 silver badge8 bronze badges

Collectives™ on Stack Overflow

Updating dom from javascript within angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related