Angularjs链接功能射击太快 [英] Angularjs link function firing too soon

问题描述

我有以下安装

HTML

＆LT;跨度明星得分={{resto.rating}}＆GT;＆LT; / SPAN＆GT;

一个控制器，下载数据，并将其设置在Resto餐厅和下面的指令。我的问题是，链接功能被调用的前的比分前pression已经插入，所以我只获得1星。

  angular.module'afmnewApp
.directive明星，（） -  GT;
    返回{
        范围：
            得分了： '@'
        模板：
            ＆LT; UL类=评级＆GT;
                ＆LT;李NG重复=明星星NG-CLASS =明星＆GT;
                    *
                ＆LT; /李＆GT;
            ＆LT; / UL＆GT;
        ，
        链接：（范围，ELEM，ATTRS） -  GT;
            scope.stars = []
            对于x在[1..scope.score]＃应该ATTRS？
                scope.stars.push（{'补'}）
    }
 

解决方案

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

  angular.module'afmnewApp
.directive明星，（） -  GT;
    返回{
        模板：
            ＆LT; UL类=评级＆GT;
                ＆LT;李NG重复=明星星NG-CLASS =明星＆GT;
                    *
                ＆LT; /李＆GT;
            ＆LT; / UL＆GT;
        ，
        范围：{
            评分：'@score
        }，
        链接：功能（范围，元素，ATTRS）{
            范围。$腕表（'分数'，功能（为newValue，属性oldValue）{
                如果（为newValue！==未定义）{
                    scope.stars = []
                    在X [1..scope.score]
                        scope.stars.push（{'补'}）
                }
            }）;
        }
    };
}）;
 

因此​​，在链接你对你的变量添加监视，所以当它改变了手表将火填充阵列。

修改基于以下耶稣评论：

我查了一下看 $之间的差异和 $观察。 <一href=\"http://stackoverflow.com/questions/14876112/difference-between-the-observe-and-watch-methods\">Here是一个很好的SO张贴描述它。看来，在DOM检查属性变化的对象（如你的情况评分你的跨度属性）对象你应该使用 $观察。其他的事，你应该使用 $观看。因此，在这种情况下，该溶液最好是：

  angular.module'afmnewApp
.directive明星，（） -  GT;
    返回{
        模板：
            ＆LT; UL类=评级＆GT;
                ＆LT;李NG重复=明星星NG-CLASS =明星＆GT;
                    *
                ＆LT; /李＆GT;
            ＆LT; / UL＆GT;
        ，
        范围：{
            评分：'@score
        }，
        链接：功能（范围，元素，ATTRS）{
            ATTRS。$观察（'分数'，功能（为newValue，属性oldValue）{
                如果（为newValue！==未定义）{
                    scope.stars = []
                    在X [1..scope.score]
                        scope.stars.push（{'补'}）
                }
            }）;
        }
    };
}）;
 

I have the following setup

HTML:

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

A controller that downloads data and sets it in resto and the directive below. My problem is that the link function is being called before the score expression has been interpolated, so I only ever get 1 star.

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

解决方案

I had a similar issue on Friday :-). I managed to find my own solution. In your case it would be :

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'})
                }
            });
        }
    };
});

So in the link you add a watch on your variable, so when it changes the watch will fire populating your array.

Edit based on Jesus comment below:

I checked about the difference between $watch and $observe. Here is a nice SO post describing it. It seems that for checking attribute changes in DOM objects (as in your case the score attribute of your span object) you should use $observe. For anything else you should use $watch. So in this case the solution should better be:

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链接功能射击太快的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！