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

更新了我的小提琴（它不起作用）

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

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

e.g

<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">

这里假设您将非活动状态置于元素绑定上。您可以直接绑定到非活动状态（在范围内）。

Answer 3

您需要从{{ }}中删除'classExpression'，例如 -

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

并使用{ - 1}}，如 -

ng-class

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';
            }
        }

设置为属性时的Angular评估表达式

4 个答案: