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

Question

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

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

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

与我的plunker和我的沙箱相比，只有一个小的变化在我的沙盒中。我使用"餐厅"资源来获取单个餐厅的数据。

有什么想法吗？

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叉子。

更新在评论中与@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脚本，并添加了一个按钮来模拟指令外的范围更改。