0

スターを付けることができるアイテムのリストがあります。カーソルを合わせると、アーカイブ、削除、スターのボタンがポップアップします。ただし、項目にス​​ターが付いている場合、スターはフェードアウトせずに表示されたままになります。 ここに画像の説明を入力

効果を処理するディレクティブ「リスト」を作成しました。

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

4

1 に答える 1

0

item.starredサーバーから値を取得していますか? undefinedその場合、データがサーバーから返される前にディレクティブが初期化されるため、取得が期待されます。

hideJavaScriptとshowイベントを使用する代わりに、CSS を使用して赤い星を表示することをお勧めします。または、angularwatchを使用して値の変化を観察しItem、javascript コードを実行することもできます。

于 2013-06-07T19:20:18.700 に答える