Question

我正在尝试为应用程序提供基于Google字体字体列表设置文本部分字体的功能。

这就是我所拥有的：

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

然后是：

<h1 style='font-family: {{headerFont}};'>Header</h1>

并在我的js文件中的控制器中：

$scope.fonts = [...an array of font names...]

最初，ng-repeat代替<li>，我正在使用：

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

这就像我想要的那样。但是我想尝试使用可滚动列表而不是下拉菜单，因为移动浏览器上的<select>菜单不支持更改单个选项的字体，对我来说，字体能够很重要在选择之前预览。我想我可以使用ng-click来设置headerFont的值，但它没有做任何事情（控制台中没有出现任何错误或任何事情。没有任何事情发生。）有谁知道为什么？

Answer 1

问题是ngRepeat为每次迭代创建子范围，因此ngClick实际上会更改本地子headerFont变量。

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

＆＃13;

var app = angular.module('demo', []);
app.controller('demoController', function($scope) {
    $scope.fonts = ['Arial', 'Times New Roman', 'Verdana', 'mono'];
})

＆＃13;

<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>

<div ng-app="demo" ng-controller="demoController">
    <h1 style='font-family: {{headerFont}};'>Header</h1>

    <ul ng-init='headerFont="mono"'>
        <li ng-repeat='font in fonts' style='font-family: {{font}};' ng-click='$parent.headerFont = font'>{{font}}</li>
    </ul>
</div>

＆＃13;

Answer 2

每个ng-repeat都会创建一个新范围。 ng-click更改了自己范围内的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>

演示：http://plnkr.co/edit/77zesZsBgYpZUDWciY18?p=preview

AngularJS：为什么不用ng-click将变量设置为从ng-repeat获得的值？

2 个答案: