如何在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 RuleORcontrollerAs模式，同时宣告控制器&使用它的别名使视图结合。