Làm cách nào để liên kết biến phạm vi này với thuộc tính ng-class?

Question

Điều này có vẻ như nó phải là khá đơn giản, tuy nhiên tôi hoàn toàn không còn lựa chọn

Theo quan điểm của tôi, tôi có:

<div>{{selectedTheme.theme}}</div> 
<ion-nav-view ng-class="selectedTheme.theme" name="menuContent"></ion-nav-view> 

nơi div đầu tiên cho ra lớp như mong đợi. Tuy nhiên, tôi không thể đưa lớp học vào phần tử ion-nav-view!

Các kết quả mark-up như sau:

<div class="ng-binding">Dark</div> 
<ion-nav-view ng-class="selectedTheme.theme" name="menuContent" class="view-container" nav-view-transition="ios" nav-view-direction="none" nav-swipe="">></ion-nav-view> 

Bất kỳ đầu vào ở tất cả sẽ là mênh mông!

PS: Ngoài ra, thiết lập đơn giản chỉ với class hoạt động tốt.

Answer 1

Trong góc ng-class sử dụng biểu thức hoặc chỉ một chuỗi cũ đơn giản. Bạn có thể làm những việc như:

1. Add/Remove lớp dựa trên các biến góc
2. Add/Remove lớp dựa trên biểu thức đánh giá
3. lớp một hay nhiều Bind dựa trên dữ liệu động

bạn chỉ có thể thêm biến Angular vào ng-class và đó là lớp sẽ được sử dụng cho phần tử đó. Vì vậy, trong trường hợp của bạn, nếu selectedTheme.theme mang lại chính xác tên class mà bạn muốn sử dụng, thì nó sẽ hoạt động tốt.

<ion-nav-view ng-class="varHoldingClassName" name="menuContent"></ion-nav-view> 

Vì vậy, đây là một ví dụ đầy đủ trong hành động:

var myApp = angular.module('myApp',[]); 
 

 
function MyCtrl($scope) { 
 
    $scope.name = 'Angular!'; 
 
    $scope.selectedTheme = { 
 
     'coalTheme': 'textColor' 
 
    }; 
 
}

.textColor{ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp"> 
 
<div ng-controller="MyCtrl"> 
 
    <div ng-class="selectedTheme.coalTheme">Hello, {{name}}!</div> 
 
</div> 
 
</div>