Question

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

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

在HTML视图源代码中，我可以看到rating =“3”。

我的沙盒中只有一小部分变化与我的沙箱相关，我使用'Restaurant'资源来获取各个餐馆的数据。

任何想法/想法？

Answer 1

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

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

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

查看您的Plunker的this fork。

更新在评论中与@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 script以及一个按钮，以模拟指令外部的范围更改。

指令在一个控制器中工作而不在另一个控制器中

1 个答案: