Question

我有以下设置

HTML：

<span star score="{{resto.rating}}"></span>

一个控制器，用于下载数据并将其设置为resto和下面的指令。我的问题是在分数表达式被插值之前，链接函数被称为，所以我只得到1星。

angular.module 'afmnewApp' .directive 'star', () -> return { scope: score: '@' template : """ <ul class="rating"> <li ng-repeat="star in stars" ng-class="star"> * </li> </ul> """, link : (scope, elem, attrs) -> scope.stars = [] for x in [1..scope.score] # should it be attrs? scope.stars.push({'fill'}) }

Answer 1

周五我有类似的问题:-)。我设法找到了自己的解决方案。在你的情况下，它将是：

angular.module 'afmnewApp'
.directive 'star', () ->
    return {
        template : """
            <ul class="rating">
                <li ng-repeat="star in stars" ng-class="star">
                    *
                </li>
            </ul>
        """,
        scope:{ 
            score: '@score'
        },
        link: function (scope, element, attrs) {
            scope.$watch('score', function (newValue, oldValue) {
                if (newValue !== undefined) {
                    scope.stars = []
                    for x in [1..scope.score]
                        scope.stars.push({'fill'})
                }
            });
        }
    };
});

因此，在链接中，您可以在变量上添加一个监视，因此当它更改时，监视将会激活您的数组。

编辑基于以下耶稣评论：

我查看了$watch和$observe之间的区别。 Here是一篇很好的SO帖子。看来，对于检查DOM对象中的属性更改（如您的score对象的span属性），您应该使用$observe。对于其他任何事情，您应该使用$watch。所以在这种情况下，解决方案最好是：

angular.module 'afmnewApp'
.directive 'star', () ->
    return {
        template : """
            <ul class="rating">
                <li ng-repeat="star in stars" ng-class="star">
                    *
                </li>
            </ul>
        """,
        scope:{ 
            score: '@score'
        },
        link: function (scope, element, attrs) {
            attrs.$observe('score', function (newValue, oldValue) {
                if (newValue !== undefined) {
                    scope.stars = []
                    for x in [1..scope.score]
                        scope.stars.push({'fill'})
                }
            });
        }
    };
});

Angularjs链接功能太快发射

1 个答案: