AngularJs指令中的样式更改没有反映在实际元素中

我有一个用angularjs 1.5.6编写的指令，它不更新浏览器中的实际元素，但指令中的元素被更新。有人可以帮我解决这个问题。AngularJs指令中的样式更改没有反映在实际元素中

我的代码如下，

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); 
     }); 
    } 
}; 
});

什么实际上，我试图做的是创建一个下拉列表选择上点击工作。

例如，

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

我想，当点击发生的菜单，FUNC指令列表元素上显示的下一个上行。更新正确发生，因为控制台日志打印附加了样式的元素，但它不反映在浏览器中的视图中。

我是新来angularjs所以任何帮助将非常感激。

来源

2016-08-16 hbn1991

我试着把你的代码插入plunker（https://plnkr.co/edit/s01OJjtNvDVSnd1NgXI7?p=preview）。我只是在下一个ul上添加style =“display：none”。如果已经显示，我会更新一些隐藏ul的指令。告诉我，如果我理解你的问题？

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

.directive ('menuFunc', function(){

回报{ 限制： 'A'，链接：函数（$范围，元素）{

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); 
    }); 
} 
}; 
})

来源

2016-08-16 13:47:42 Silvinus

非常感谢您的回复快。 :) 你理解正确的问题，但在那里的代码应该工作......问题是，我有一个超链接在menuFunc指令附加的列表项中，我只有一个＃那里我完全忘了那......问题是每当我点击那个元素页面被重新加载，这就是为什么我看不到更改的原因。无论如何，非常感谢:) – hbn1991

我有另一个问题，当我尝试应用这个子列表...当我点击一个子列表，这是指定此menu-func指令，它显示了两次点击...我没有明白为什么出现这种情况？我可以编辑您的plunkr复制这个问题... 这里的链接， https://plnkr.co/edit/s01OJjtNvDVSnd1NgXI7?p=preview 如果你可以采取看看它，我真的很感激它...先谢谢了:) – hbn1991

其实我也能解决这个问题......发生了什么叫做冒泡。所以，如果你添加， e.stopPropagation（）; 到绑定函数它会正常工作:) – hbn1991

AngularJs指令中的样式更改没有反映在实际元素中

回答

相关问题