Javascript AngularJS：为什么赢了'；t ng单击将变量设置为从ng repeat获得的值？

我试图让一个应用程序能够根据谷歌字体的字体列表为部分文本设置字体

以下是我所拥有的：

<ul ng-init='headerFont="mono"'>
  <li ng-repeat='font in fonts' style='font-family: {{font}};' ng-click='headerFont = font'>{{font}}
  </li>
</ul>

最初，我使用的不是

上的

ng repeat

，而是：

<select ng-model='headerFont' style='font-family: {{headerFont}};'>
  <option ng-repeat='font in fonts' style='font-family:{{font}};'>{{font}}
  </option>
</select>

{{font}}

---

这正是我想要的。但我想尝试使用可滚动列表而不是下拉菜单，因为移动浏览器上的

菜单不支持更改单个选项的字体，而且在选择之前能够预览字体对我来说很重要。我想我可以使用

ng click

来设置

headerFont

的值，但它什么也不做（控制台中没有显示错误或任何事情。只是什么都没有发生）。有人知道为什么吗？

每个

ng repeat

都会创建一个新范围。

ng单击

在其自身范围内更改

headerFont

，而不触摸顶层的

headerFont

您可以在顶层创建字典，以防止子作用域进入：

<ul ng-init="top = {'headerFont':'mono'}">
 <li ng-repeat='font in fonts' 
     style='font-family: {{font}};' 
     ng-click='top.headerFont = font'>
   {{font}} / {{top.headerFont}}
  </li>
</ul>

{{font}}/{{top.headerFont}}

---

演示：

问题是ngRepeat为每个迭代创建子范围，因此ngClick实际上更改了本地子

headerFont

变量

一种可能的解决方案是显式引用父范围：

var-app=angular.module（'demo'，[]）；
app.controller（'demoController'，函数（$scope）{
$scope.fonts=['Arial'、'Times New Roman'、'Verdana'、'mono']；
})

标题

{{font}

如果您可以提供一个JSFIDLE或plunkr或其他与您的问题相关的东西，那就容易多了。无论如何，我认为您可以使用

ng style

指令，不要在声明性代码（HTML）中使用语句，而是将这一行代码作为控制器中的方法，以后调试或遵循会容易得多。有没有其他方法可以让我在重复作用域内设置顶级值？@Nathan dsfq提供了一个处理一级继承的答案。我已经更新了可以处理多个继承级别的答案。同意，这个点修复在嵌套范围的情况下更灵活，如include、ngIf等。

<select ng-model='headerFont' style='font-family: {{headerFont}};'>
  <option ng-repeat='font in fonts' style='font-family:{{font}};'>{{font}}
  </option>
</select>

<ul ng-init="top = {'headerFont':'mono'}">
 <li ng-repeat='font in fonts' 
     style='font-family: {{font}};' 
     ng-click='top.headerFont = font'>
   {{font}} / {{top.headerFont}}
  </li>
</ul>