0

ディレクティブを使用してコードをカスタマイズしたいと考えています。

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

私は何か見落としてますか？

4

2 に答える 2

2

クラスが正しく変更されない理由は、テンプレートを適切にリンクしていないためです。組み込みの機能を使用すれば、これは簡単に修正できます。

var feederliteModule = angular.module('feederliteModule', []);
feederliteModule.directive('collapseExtend', [function() {
  return {
    restrict: 'E',
    scope: { 
      isCollapsed:'=collapseTarget',
      label: '@'
    },
    template: '<button class="btn" ng-click="isCollapsed = !isCollapsed">'+       
                '<span>{{ label }}</span>'+  
                '<i ng-class="{ \'icon-chevron-right\': isCollapsed, \'icon-chevron-down\': !isCollapsed }"></i>'+  
              '</button>'
  }
}]);
feederliteModule.controller('test', ['$scope', function($scope) {
  $scope.isCollapsedUpload = false;
}]);

私の理解では、親要素を置き換えることで、ボタン自体に新しいものを作成することなく、このオブジェクトが関連付けられていた分離スコープを削除していました。

于 2013-05-17T14:23:15.400 に答える