Angular 设置为属性时计算表达式

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'}}",
            }

如您所见，我们有一个名为 classExpression 的变量，它是我希望附加到元素

的表达式

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

但是它不评估它。

所以我的问题是这怎么可能（如果可能的话）

fiddle

更新了我的 fiddle（没用）

Answer 1

您可以直接使用 ng-class 而不是将其绑定到元素表达式吗？无论您的 scope.inactive 发生什么变化，它都会被重新评估（或者您可以将非活动元素绑定到您的元素。

例如

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

在 Angular 1.1.4 和更新版本中，您还可以使用三元运算符

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

这里假设您将 inactive 放在元素绑定上。您可以直接绑定到您的非活动状态（而不是在范围内）。

Answer 2

您需要从 'classExpression' 中删除 {{ }}，就像 -

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

也可以像-

一样使用ng-class

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

Answer 3

可能使您的 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';
            }
        }

Answer 4

我想重构您的对象以具有以下结构。我真的不鼓励您将表达式放入 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

Angular 设置为属性时计算表达式

Angular evaluate expression when set as a property

javascript

angularjs

ng-class

Angular 设置为 属性 时计算表达式

Angular evaluate expression when set as a property

javascript

angularjs

ng-class

Angular 设置为属性时计算表达式