如何在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模式，同時宣告控制器&使用它的別名使視圖結合。