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指令中的樣式更改沒有反映在實際元素中

回答

相關問題