AngularJS：为什么ng

AngularJS：为什么ng-click将变量设置为从ng-repeat获得的值？(AngularJS: Why won't ng-click set a variable as a value obtained from ng-repeat?)

我试图让应用程序能够根据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的值，但它什么都不做（控制台或任何东西都没有显示错误，只是没有任何反应。）有谁知道为什么？

I'm trying to give an app the ability to set the font for portion of text based on a list of fonts from Google Fonts.

Here's what I have:

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

and then later on:

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

and in the controller in my js file:

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

Originally, instead of ng-repeat on <li>, I was using:

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

And that worked exactly like I wanted it to. But I wanted to try using a scrollable list instead of a drop-down menu because the <select> menu on mobile browsers doesn't support changing fonts of individual options, and it's important to me for the fonts to be able to be previewed before choosing. I figured I could just use ng-click to set the value of headerFont, but it doesn't do anything (no errors show up in the console or anything. Just nothing happens.) Does anyone know why?

最满意答案

问题是ngRepeat为每次迭代都创建子作用域，所以ngClick实际上会更改本地子成员headerFont变量。

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

var app = angular.module('demo', []);
app.controller('demoController', function($scope) {
    $scope.fonts = ['Arial', 'Times New Roman', 'Verdana', 'mono'];
}) 
  
<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> 
  
 
The problem is that ngRepeat creates child scope for each iteration, so ngClick actually changes local child headerFont variable.
 
One possible solution is to explicitly refer parent scope:
 
 
 
  
  
var app = angular.module('demo', []);
app.controller('demoController', function($scope) {
    $scope.fonts = ['Arial', 'Times New Roman', 'Verdana', 'mono'];
}) 
  
<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>