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

我试着效仿AngularJS的例子。我在第21步。我没有创建ng模型，而是尝试做一些不同的事情，在这里创建了一个。我的问题是它只在Restaurants.html中有效，而在Menu.html中不起作用。我甚至可以在查看源代码时看到{{restaurant.rating}的值，例如

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

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

从我的plunker到我的沙盒，只有一个小小的变化在我的沙盒中，我使用资源来获取各个餐厅的数据

---

有什么想法/想法吗？

问题在于属性

餐厅

是一个对象数组，在

菜单.html

中，您没有以正确的方式访问它。换成

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

---

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

Hmm，实际上属性应该是“restaurant”，而不是“restaurants”-因为菜单页面中只有一个餐厅。请看这一页，它反映了我的沙箱。So Restaurants.html-列出所有餐厅，Menu.html-单个餐厅。我已将其重命名为

餐厅

，因为该属性是一个数组，所以很有意义。：）如果它只表示一个对象，那么它不应该是列表。我会更新plunker脚本来解决这个问题。啊，我明白你的意思了，对不起，我的错。我检查了api是否返回一个对象，

{“days”：[1，]，“menuItems”：[{“name”：“bockwerst Würstchen”，“price”：4.95}]，“price”：3，“rating”：3，“id”：“esthers”}

，正如我前面提到的，在Menu.html中我可以看到{restaurant.rating}=3，因此调用/返回的数据是正确的。只有当调用进入指令内部时，我才看到scope.rating为“”[继续我之前的评论]，有趣的是，您的解决方案确实给了我一个想法，因此在MenuController.js中我更改了

$scope.restaurant=restaurant.get（{id:$routeParams.restaurantId}）$scope.restaurant=对象；`它开始工作了，我可以根据评级属性看到星星。所以我觉得这里有一些范围问题？也许是时间问题？Angular正在尝试在api调用返回之前呈现数据？哦，我现在知道发生了什么。这里是：您的指令在
链接中呈现星号，但这只发生一次（指令初始化的那一刻）。由于当请求返回时，
Restaurant`的
get`方法仅填充
Restaurant
属性，因此指令保持不变。您需要创建一个
$watch
，以便监视
评级
属性，并在每次属性更改时重新渲染星星。我将更新我的答案来说明这一点。
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});
        }  
    });
}