Angular js ng-repeat 和指令答案

【问题标题】：Angular js ng-repeat and directivesAngular js ng-repeat 和指令
【发布时间】：2013-06-08 03:20:18
【问题描述】：

我有一个可以加星标的项目列表。悬停时会弹出存档、删除和星号按钮。但是，如果该项目已加星标，则星标不会淡出但仍可见。

我创建了一个指令“列表”来处理效果。

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元素

<li ng-repeat="item in items" list="{{item.starred}}">

问题是，如果一个项目被加星标，红星不会出现，直到我将鼠标悬停在元素上，而不是在数据本身初始化时。之后，一切正常。

似乎列表属性在初始化时没有从{{item.starred}} 获取值。当我将值输出到控制台时，我得到了undefined。只有当我将鼠标悬停在元素上时，列表属性才会正确分配来自{{item.starred}}的值

【问题讨论】：

标签： javascript html dom angularjs coffeescript

【解决方案1】：

您是否从服务器获取item.starred 值？如果是这样，则预期会得到undefined，因为该指令在从服务器返回的数据之前被初始化。

我建议使用 CSS 来显示红星，而不是使用 javascript hide 和 show 事件。或者，您可以使用 Angular watch 观察 Item 值的变化并运行 javascript 代码。

【讨论】：