我试图让应用程序能够根据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>
更多推荐
发布评论