angularjs - 指令模板中 ng-class 中的条件逻辑

Question

我正在使用 AngularJS，我正在编写自己的指令。我想在我的自定义指令中使用条件逻辑。问题出在template零件上。这是我的一段代码：

angular.module('myDirectives').directive('widget', function() {
    return {
        replace: true,
        restrict: 'E',
        template:
            '<div class="widget">' +
                '<div class="panel panel-default">' +
                    '<div class="panel-heading">' +
                            '<a href="" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">' +
                                '<i class="fa" ng-class=" { 'fa-angle-up': !isCollapsed, 'fa-angle-down': isCollapsed } "></i>' +
                            '</a>' +
                    '</div>' +
                    '<div class="panel-body" collapse="isCollapsed">' +
                        '<p>Panel Content</p>' +
                    '</div>' +
                '</div>' +
            '</div>',
        transclude: true
    }
});

此行会引发错误。

'<i class="fa" ng-class=" { 'fa-angle-up': !isCollapsed, 'fa-angle-down': isCollapsed } "></i>'

周围和正在造成这种情况''。可能有一个非常简单的解决方法，但我还没有弄清楚。所以我问你们的问题；有没有其他方法可以写这一行？fa-angle-upfa-angle-down

Answer 1

你必须避开撇号

'<i class="fa" ng-class=" { \'fa-angle-up\': !isCollapsed, \'fa-angle-down\': isCollapsed } "></i>'