0

我正在尝试遵循 AngularJS 上的foodMe示例。我在第 21 步。我没有创建一个 ng 模型，而是尝试做一些不同的事情，在这里创建了一个Plunker。我的问题是它只适用于 Restaurants.html 而不是 Menu.html。当我查看源代码时，我什至可以看到 {{restaurant.rating}} 的值，例如

<span stars rating="{{restaurant.rating}}" readonly="true"></span>

在 HTML 视图源中，我可以看到 rating="3"。

我的沙盒与我的沙盒相比，只有一个小的变化是在我的沙盒中，我使用“餐厅”资源来获取各个餐厅的数据。

有什么想法/想法吗？

4

1 回答 1

1

问题是该属性restaurants是一个对象数组，并且Menu.html您没有以正确的方式访问它。将其更改为

Menu Rating: {{restaurants[0].rating}}
<br />
<span stars rating="{{restaurants[0].rating}}" readonly="true"></span>

它会起作用的。在 中不会发生同样的情况，Restaurants.html因为您正在使用 a 遍历数组ng-repeat。

看看你的 Plunker 的这个分支。

更新在评论中与@parsh 交谈后，我可以更好地理解他的代码的问题。问题是该指令在其范围更改时不会重新呈现。这可以通过使用手表来解决：

link: function (scope, element, attrs, ctrl) {
    scope.$watch('rating', function() {
        scope.stars = [];
        for (var i = 0; i < 5; i++) {
            scope.stars.push({'fm-selected': i < scope.rating});
        }  
    });
}

我用上面的更改和一个按钮更新了Plunker 脚本，以模拟指令外部的范围更改。

于 2013-08-15T18:26:13.087 回答