4

再利用可能なディレクティブのライブラリを考え出そうとしています。実装しようとした最初の 2 つのディレクティブは、DatePicker と DateRangePicker です。DateRangePicker には 2 つの DatePicker が含まれている必要があります。

DatePicker に次のような署名を付けたい:

<div cx-date-picker="" cx-label="myLabel" 
     cx-id="myDate" cx-source="myDateVarInScope"></div>

そして、DateRangePicker を次のようにしたい:

<div cx-date-range-picker cx-id="searchRangePicker" 
     cx-source="myDateRangeInScope"></div>

myDateRangeInScope には次のメンバーが含まれます: startDate および endDate

ディレクティブの作成方法の例をいくつか見ましたが、基礎となるディレクティブにパラメーターを渡す方法がわかりません。これがDatePickerのコードです

angular.module('ng').directive('cxDatePicker', function () {
      return {
        restrict: 'A',
        scope: 'isolate',
        template: '<div class="control-group input-append">' +
        '<label for="{{theId}}" class="label">{{theLabel}}</label>' +
        '<input id="{{theId}}" class="input-small" type="text" ' + 
        'ng-model="theSource" data-date-format="dd/mm/yyyy" bs-datepicker>' +
        '<button type="button" class="btn" data-toggle="datepicker">' +
        '<i class="icon-calendar"></i></button>' +
        '</div>',

        link: function (scope, iterStartElement, attr) {
          var theId = attr['cxId'];
          scope.theLabel = attr['cxLabel']
          scope.theId = attr['cxId'];
          scope.theSource = attr['cxSource'];
        }
      };
    });

これは、 theIdとtheLabelの適切な値を表示しますが、正しい日付を表示しません。

これは DateRangePicker のコードで、基になる DatePicker の属性を設定できません。

angular.module('ng').directive('cxDateRangePicker', function () {
      return {
        restrict: 'A',
        scope: 'isolate',
        template: '<div cx-date-picker="" cx-source="{{startSource}}" ' +
          'cx-label="{{fromLabel}}" cx-id="{{startId}}"></div>' +
          '<div cx-date-picker="" cx-source="{{endSource}}" cx-label="{{toLabel}}" ' +
          ' cx-id="{{endId}}"></div>',
        link: function (scope, iterStartElement, attr) {
          var theId = attr['cxId'];
          scope.startId = theId + "From";
          scope.endId = theId + "To";
          scope.fromLabel = "From";
          scope.toLabel = "To";
          scope.startSource = attr['cxSource'] + ".startDate";
          scope.endSource = attr['cxSource'] + ".endDate";

        }
      };
    });

誰でも私に解決策を教えてもらえますか? DateRangePicker の link() メソッドの前に、基になる DatePickers の link() メソッドが呼び出されることがわかりました。したがって、値が渡されないのも不思議ではありません。しかし、問題を解決するための全体的な概念の理解が不足しています。公式ドキュメントはあまり役に立ちませんでした。

一般に、他のディレクティブの上にディレクティブを構築し、それを実行することで、ビジネス ドメイン固有のコンポーネント ライブラリを構築するという、同様の目標を達成しようとした人はいますか?

4

2 に答える 2

0

トリックはスコープの処理にあります。つまり、Angular.js には確かに健全なコンポーネント アーキテクチャがあり、小さなコンポーネントの上に大きなコンポーネントを構築することができます。これは、Backbone と比較して優れた進歩です。Ember.js にも同様の機能があるかどうか疑問に思っています。

angular.module('ng').directive('cxDatePicker', function () {
  return {
    restrict: 'A',
    scope: 
      {
        cxLabel: '@',
        cxId: '@',
        cxSource: '='
      },
    template: '<div class="control-group input-append">' +
    '<label for="{{cxId}}" class="label" style="margin-right: 6px;">{{cxLabel}}</label>' +
    '<input id="{{cxId}}" class="input-small" type="text" ng-model="cxSource" data-date-format="dd/mm/yyyy" bs-datepicker>' +
    '<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>' +
    '</div>',

    link: function (scope, iterStartElement, attr) {}
  };
});


angular.module('ng').directive('cxDateRangePicker', function () {
  return {
    restrict: 'A',
    scope: 
      {
        cxId: '@',
        cxSource: '='
      },
    template: '<div cx-date-picker="" cx-source="cxSource.startDate" cx-label="From" cx-id="{{cxId}}From" ></div>' +
      '<div cx-date-picker="" cx-source="cxSource.endDate" cx-label="To" cx-id="{{cxId}}To" ></div>',
    link: function (scope, iterStartElement, attr) {}
  };
});
于 2013-06-01T06:53:30.240 に答える