如何使用带有Scope和Ionicons的ngClass

Question

我正在使用AngularJS构建一个网站，以在实时预览中显示表单数据。此预览包括ionicons，我正在尝试使用ng-class根据用户输入的内容动态更改默认值的图标。

<!-- Call Icon Input Field -->
<input type="text" class="form-control" ng-model="$parent.callIcon">

// Call Icon Default Value
$scope.callIcon = "ion-ios-telephone";

<!-- Call Icon in Previewer -->
<span ng-class="'previewerCardButtonIcons icon {{$parent.callIcon}}'"></span> Give a Call

现在，图标显示在预览器中，但是当我更改表单中的图标时，没有任何反应。我知道范围变量在表单输入更改时会发生变化，但它根本不会更改预览器。任何帮助都会很棒。

Answer 1

不需要{{}}指令中的ng-class（插值）。它与ng-class单独存在。

<span class="previewerCardButtonIcons icon" ng-class="$parent.callIcon"></span> Give a Call

虽然我不鼓励您在应用中的任何地方使用$parent注释，但我要说使用Dot Rule 或 {{1}模式同时声明控制器＆amp;使用其别名来进行视图绑定。