CODEWITHSUNDEEP
angularjsangularjs-directive
hbn1991
hbn1991

Reputation: 274

Style changes in AngularJs directive is not reflected in the actual element

I have a directive written in angularjs 1.5.6, it doesn't update the actual element in the browser, but the element inside the directive gets updated. Can somebody help me solve this issue.

My code is as follows,

mccp.directive ('menuFunc', function (){
return {
    restrict: 'A',
    link: function ($scope, element) {

        angular.element(element).bind('click', function ($event) {
            $event.target.nextElementSibling.style.display = 'block';
            console.log($event.target.nextElementSibling.style.display);
        });
    }
};
});

What I'm actually trying to do is to create a drop down list which works on click.

for example,

<ul>
   <li menu-func><a href="#/">Test</a>
      <ul>
         <li>Item1</li>
         <li>Item2</li>
      </ul>
   </li>
</ul>

I want the next ul shown when a click happens on the list element with the menu-func directive. The update happens properly, because the console log prints the element with the style attached to it, but it's not reflected in the view in browser.

I'm new to angularjs so any help would be really appreciated.

Upvotes: 0

Views: 57

Answers (1)

Silvinus
Silvinus

Reputation: 1445

I try your code into plunker (https://plnkr.co/edit/s01OJjtNvDVSnd1NgXI7?p=preview). I just add style="display: none" on next ul. And I update a little your directive to hide ul if already displayed. Tell me if I understand your question ? 

<ul>
   <li menu-func>
     <a href="#/">Test</a>
      <ul style="display:none">
         <li>Item1</li>
         <li>Item2</li>
      </ul>
   </li>
</ul>

.directive ('menuFunc', function (){

return { restrict: 'A', link: function ($scope, element) {

    angular.element(element).bind('click', function ($event) {
        $event.target.nextElementSibling.style.display = 
            $event.target.nextElementSibling.style.display == 'block' ? 'none' : 'block';
        console.log($event.target.nextElementSibling.style.display);
    });
}
};
})

Upvotes: 1

Related Questions