0

JavaScript を使用せずに、マークアップ、css、および通常の選択要素を使用してカスタム選択ドロップダウンを作成しましたが、これを angularjs ディレクティブにしたいので、アプリケーションでボイラープレート html を繰り返し続ける必要はありません。使用されるマークアップの例を次に示します (angularjs のものはまだありません)。

<div class="select">
  <select name="mySelect">
    <option value="val1">Value 1</option>
    <option value="val2">Value 2</option>
    <option value="val3">Value 3</option>
  </select>
  <span class="select-value">Value 1</span>
  <span class="select-arrow"><i></i></span>
</div>

みたいなことができるようになりたい

<my-select ng-model="mySelect" ng-options="opt.val as opt.label for opt in options">

組み込みの select ディレクティブの場合と同様です。その機能を維持しながら、選択ディレクティブをラップまたは拡張する簡単な方法はありますか?

ありがとう！

4

1 に答える 1

0

デコレーターを使用すると、組み込みのディレクティブであっても、ディレクティブを変更できます。例えば：

angular.module('directiveDecoration', [])
    .config(['$provide', Decorate]);

function Decorate($provide) {

  //decorate angular's built-in select directive
  $provide.decorator('selectDirective', ['$delegate', function($delegate) {
    var directive = $delegate[0],
      link = directive.link;

    //directive.templateUrl = "test/something.tpl.html";

    directive.compile = function() {
      return function(scope, element, attrs, ctrl) {
        link.apply(this, arguments);

        //do more  stuff here...
      }
    };

    return $delegate;
  }]);
}
于 2015-03-22T23:29:40.570 に答える