ディレクティブを使用してコードをカスタマイズしたいと考えています。
isCollapsedUpload
コントローラーで次のように定義されたフラグを切り替えるボタンを作成しました@scope.isCollapsedUpload=false
。
ユーザーがボタンを押すと、またはその逆になり、アイコンが変化しますisCollapsedUpload
。true
コントローラーから:
$scope.switcher = function (booleanExpr, trueValue, falseValue) {
return booleanExpr ? trueValue : falseValue;
}
$scope.isCollapsedUpload = false;
<button class="btn" ng-click="isCollapsedUpload = !isCollapsedUpload">
<span>Upload file</span>
<i class="{{ switcher( isCollapsedUpload, 'icon-chevron-right', 'icon-chevron-down' )}}"></i>
</button>
私はこれを書きましたdirective
:
feederliteModule.directive('collapseExtend', function() {
return {
restrict: 'E',
scope: { isCollapsed:'@collapseTarget' },
compile: function(element, attrs)
{
var htmlText =
'<button class="btn" ng-click="isCollapsed = !isCollapsed">'+
' <span>'+attrs.label+'</span>'+
' <i class="{{ switcher(isCollapsed, \'icon-chevron-right\', \'icon-chevron-down\' )}}"></i>'+
'</button>';
element.replaceWith(htmlText);
}
}
});
そして今、私はそれを次のように使用できます:
<collapse-extend
collapse-target="isCollapsedUpload"
label="Upload file"
></collapse-extend>
うまくいきません。アイコンの変更はありません。エラーなし、
isCollapsedUpload
フラグは変更されません。にのみ変化します。 directive
私は何か見落としてますか?