Первая проблема: ключ font-size
нельзя использовать без апострофов , поскольку он не является действительным ключом объекта JS. Вы должны написать, например, ng-style="{'font-size': '12px'}"
.
Во-вторых, атрибут ng-style
оценивается как JS, поэтому вы не можете использовать синтаксис двойных фигурных скобок, поскольку он не является допустимым JS. Просто напишите, как внутри JS: ng-style="{'font-size': writing_size + 'px'}"
.
Ваш рабочий пример:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<title>AngularJS Whiteboard</title>
</head>
<body>
<div ng-app="">
<textarea name="message" rows="10" cols="30" ng-model="writing">
</textarea>
<span> Marker color: <input type = "text" size = "7" ng-model="marker_color"></span>
<span> Writing size: <input type = "text" size = "7" ng-model="writing_size"></span>
<br>
<br>
<div id = "whiteboard" ng-bind="writing" ng-style="{ color : marker_color, 'font-size': writing_size + 'px' }">
</div>
<div id = "test">
{{ writing_size + "px"}}
</div>
</div>
</body>
</html>