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-up周围的fa-angle-down导致此问题。这可能是一个非常简单的解决方法，但我还没有想到它。所以我的问题是你们的;有没有其他方法可以写这一行？

Answer 1

你必须逃避撇号

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

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

1 个答案: