Угловая оценить выражение, когда устанавливается как свойство

Question

Скажем, например вы следующее:

$scope.element = 
      { 
       html: '<a type="button" class="btn btn-xs btn-rounded m-r-sm"><i class="icon icon-user-unfollow"></i></a>', 
       classExpression : " {{inactive == 'true' ? 'btn-success': 'btn-danger'}}", 
      } 

Как вы можете видеть, что мы имеем veriable называется classExpression, который является выражением я хотел бы добавить к элементу

<span ng-bind-html="element.html | trust" class="{{element.classExpression}}">Text in between<span> 

Однако он не оценивает его.

Так что мой вопрос, как это возможно (если это вообще возможно)

fiddle

Обновлена ​​моя скрипка (оно не было работать)

Answer 1

Я бы сказал, рефакторинг свой объект есть нижеследующий структура. Я действительно не рекомендую вам добавлять выражения в string.

HTML

<span ng-bind-html="element.html" ng-class="element.classExpression[element.inactive]"> 
    Text in between 
</span> 

Код

$scope.element = { 
    html: '<a type="button" class="btn btn-xs btn-rounded m-r-sm"><i class="icon icon-user-unfollow"></i></a>', 
    classExpression: { 
     'true': 'btn-success', 
     'false': 'btn-danger' 
    }, 
    inactive: 'true' 
}; 

Forked Fiddle

Answer 2

Вы можете использовать нг-класс напрямую, а не связывать его к элементу выражения? Он будет переоцениваться whever ваш scope.inactive изменится (или вы могли бы связать неактивный к вашему элементу.

например

<span ng-bind-html="element.html | trust" ng-class="{'btn-success' : element.inactive, 'btn-danger' : !element.inactive}">Text in between<span> 

в угловых 1.1.4 и новее вы можете также использовать тройной оператор

<span ng-class="element.inactive ? 'btn-success' : btn-danger"> 

Здесь предполагается, что вы поместите неактивным на ваш элемент привязки. вы можете непосредственно привязать к вашему неактивным (по размаху, а).

Answer 3

вы должны удалить {{ }} от вашего 'classExpression' вроде как -

classExpression : " inactive == 'true' ? 'btn-success': 'btn-danger'" 

, а также использовать ng-class вроде как -

ng-class="{{element.classExpression}}" 

Answer 4

Возможно сделать ваш classExpression функцию:

$scope.element = 
     { 
      html: '<a type="button" class="btn btn-xs btn-rounded m-r-sm"><i class="icon icon-user-unfollow"></i></a>', 
      classExpression : function(){ 
       return $scope.inactive == 'true' ? 'btn-success': 'btn-danger'; 
      } 
     }