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