2

私は 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原因です。おそらく非常に簡単な回避策がありますが、私はまだそれを理解していません。皆さんへの質問です。この行を書く他の方法はありますか?

4

1 に答える 1