スターを付けることができるアイテムのリストがあります。カーソルを合わせると、アーカイブ、削除、スターのボタンがポップアップします。ただし、項目にスターが付いている場合、スターはフェードアウトせずに表示されたままになります。
効果を処理するディレクティブ「リスト」を作成しました。
app.directive "list",() ->
restrict: 'A'
link: (scope, element, attrs) ->
selected = false
element.on 'mouseenter', ->
$ element.find(".sub-menu > label, .sub-menu > a").show()
element.on 'mouseleave', ->
if attrs['list'] is "true"
$ element.find(".sub-menu > .ng-archive, .sub-menu > a").hide()
else
$ element.find(".sub-menu > label, .sub-menu > a").hide()
element.on 'click', ->
selected =! selected
if selected then element.addClass 'list-selected' else element.removeClass 'list-selected'
console.log scope
# I want to execute the following statement when initializing
if attrs['list'] is "true"
$ element.find(".sub-menu > .ng-archive, .sub-menu > a").hide()
else
$ element.find(".sub-menu > label, .sub-menu > a").hide()
実際の李要素
<li ng-repeat="item in items" list="{{item.starred}}">
問題は、アイテムにスターが付いている場合、データ自体の初期化時ではなく、要素にカーソルを合わせるまで赤いスターが表示されないことです。その後、すべて正常に動作します。
{{item.starred}}
list 属性は初期化時に値を取得していないようです。値をコンソールに出力すると、undefined
. 要素の上にカーソルを置いたときにのみ、リスト属性に値が適切に割り当てられます{{item.starred}}